js分支语句和循环语句-EW帮帮网

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; // 跳过 3
  console.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>

js分支语句和循环语句