js分支语句和循环语句
js分支语句和循环语句
@jarringslee
分支语句
单分支 if
只判断一次，条件为真就执行，为假直接跳过。
if (条件) {// 条件为真时执行
}
let age = 18;
if (age >= 18) {console.log('成年');
}
双分支 if-else
条件为真执行 A，否则执行 B。
if (条件) {// 条件为真
} else {// 条件为假
}
let score = 59;
if (score >= 60) {console.log('及格');
} else {console.log('完蛋');
}
三元运算符 ? :
把双分支 if-else 缩成一行，必须有 else，并返回一个值。
条件 ? 值A : 值B
let num = prompt('请输入一个数字')
num = num < 10 ? 0 + num : num
//0 + num是字符串相加的形式，给个位数补一个0
| 形式 | 关键字 | 行数 | 返回值 | 使用场景 |
|---|---|---|---|---|
| 单 if | if | 多 | 无 | 只做一件事 |
| if-else | if...else | 多 | 无 | 二选一 |
| 三元运算符 | ? : | 1 | 有 | 简单二选一，要返回值 |
- 三元运算符必须有 else；
if可以没有。 - 三元运算符不能写多条语句；复杂逻辑用 if-else。
switch分支
switch 就是“多选一”的快捷 if-else 链——把同一个变量/表达式的不同取值，一一对照执行。
基本语法
switch (表达式) {case 值1:语句块1;break; // 记得 break，否则会继续往下“穿透”case 值2:语句块2;break;...default: // 相当于最后的 else默认语句;
}
let day = 3;
switch (day) {case 1:console.log('周一');break;case 2:console.log('周二');break;case 3:console.log('周三');break;default:console.log('未知');
}
// 输出：周三
几个注意点
-
全等比较
switch用的是===，不会自动类型转换。switch ('2') {case 2: // 不会命中，因为 '2' !== 2... } -
break 穿透
忘写break会把下面所有 case 都执行一遍。
有时故意利用穿透做“合并”：switch (score) {case 5:case 4:console.log('优秀'); // 4 和 5 都会走这里break; } -
default 可省
如果所有 case 都不匹配且没有 default，就什么都不做。
何时用 switch？
| 场景 | 推荐写法 |
|---|---|
| 同一个变量的离散值 | switch |
| 区间判断（> <） | if-else |
| 复杂逻辑 / 多条件 | if-else / 对象映射 |
“变量等值多选一，switch 比 if-else 更清爽；记得 break 防穿透，default 兜底别忘掉。”
switch小练习：ATM存款机
利用while循环的特点创建无限循环的用户弹窗与用户进行交互；用switch语句创建存款、取款等不同服务。注意处理余额不足、输入不当等问题。
<script>let money = 1000;while (true) {const num = Number(prompt(`请选择操作：\n1. 存钱\n2. 取钱\n3. 查看余额\n4. 退出`));if (num === 4) break; // 退出if (isNaN(num) || num < 1 || num > 3) {alert('请输入 1~4 之间的数字！');continue;}switch (num) {case 1: {const add = Number(prompt('请输入存钱金额'));if (isNaN(add) || add <= 0) { alert('金额无效'); break; }money += add;alert(`存入成功，余额：${money} 元`);break;}case 2: {const take = Number(prompt('请输入取钱金额'));if (isNaN(take) || take <= 0) { alert('金额无效'); break; }if (take > money) { alert('余额不足'); break; }money -= take;alert(`取出成功，余额：${money} 元`);break; // 漏掉的 break 已补上}case 3:alert(`当前余额：${money} 元`);break;}}alert('感谢使用，再见！');</script>
循环语句
while循环
while (判断条件) {循环命令条件增量
}
continue & break
break 直接跳出整个循环（或 switch），循环结束；
continue 立即跳过本次迭代，继续下一轮循环。
| 关键字 | 作用范围 | 效果描述 | 常见场景 |
|---|---|---|---|
break | 循环 / switch | 立即终止当前结构，后续不再执行 | 找到目标值后提前结束 |
continue | 仅循环 | 跳过本次剩余代码，继续下一轮 | 过滤/跳过不想要的值 |
代码示例
// break：找到 5 就停
for (let i = 1; i <= 10; i++) {if (i === 5) break; // 遇到 5 立即跳出console.log(i); // 1 2 3 4
}// continue：跳过 5
for (let i = 1; i <= 5; i++) {if (i === 3) continue; // 跳过 3console.log(i); // 1 2 4 5
}
break “炸” 整个循环，continue “跳过” 这一回。
for循环
for (let i = 0; i < 3; i++) {console.log(i); // 0 1 2
}
- 三个格子：
起点; 条件; 步长 - let 代替 C 的
int，用完就丢（不会泄漏出来）。
| 坑 | 例子 | 结果 |
|---|---|---|
| 忘更新 | for(let i=0; i<3; ) { ... } | 死循环 |
用 var | for(var i=0; i<3; i++) { }console.log(i) | 循环外还能打印 i（3） |
| 条件写错 | for(let i=0; i>-1; i++) | 死循环 |
let sum = 0;
for (let i = 1; i <= 5; i++) {sum += i;
}
console.log(sum); // 15
明确循环次数用for，不明确用while
for循环小练习1：九九乘法表
固定的两层for循环。主要需要动脑子的点在于在输出中添加标签并设置css属性。
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span {display: inline-block;border: 1px solid blue;border-collapse: collapse;margin: 2px 2px;height: 25px;width: 80px;text-align: center;border-radius: 4px;box-shadow: 1px 1px 1px 1px grey;color: hotpink;}</style>
</head><body><script>for (let i = 1; i <= 9; i++) {for (let j = 1; j <= i; j++) {document.write(`<span>${i} x ${j} = ${i * j}</span>`)}document.write('<br>')}</script>
</body>
for循环小练习2：冒泡排序
和C语言冒泡排序基本相同，在数组的声明上略微有些不同。
<script>let n = +prompt('您想输入几个数字？')let arr = []for (let i = 0; i < n; i++) {arr[i] = + prompt(`请您输入第${i + 1}个数字：`)}for (let i = 0; i < arr.length - 1; i++) {for (let j = i + 1; j < arr.length; j++) {if (arr[i] > arr[j]) {let t = arr[i]arr[i] = arr[j]arr[j] = t}}}document.write('排序后的顺序为：')for (let i = 0; i < arr.length; i++) {if (i != arr.length - 1) document.write(`${arr[i]}，`)else document.write(`${arr[i]}。`)}</script>