【原生JS教程】第4节：条件语句与循环-CSDN博客

👽第 4 课：条件语句与循环

📌 引言

流程控制是编程的核心之一，JavaScript 提供了 if...else、switch 等条件语句，以及 for、while、do...while 等循环结构，帮助开发者根据不同的条件执行不同的代码逻辑。掌握这些结构是编写复杂逻辑、处理数据、构建交互式应用的基础。

通过本节课的学习，你将掌握：

if...else 和 switch 条件语句的使用方式
for、while、do...while 循环的结构和使用场景
break 和 continue 控制循环流程
条件判断与循环嵌套的实战技巧
常见陷阱与最佳实践

📚 本节内容概要

✅ 1. 条件语句（Conditional Statements）

1.1 `if...else` 语句

用于根据条件执行不同的代码块。

let age = 20;
if (age >= 18) {
  console.log("成年");
} else {
  console.log("未成年");
}

1.2 `else if` 多条件判断

用于判断多个条件：

let score = 85;
if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else {
  console.log("C");
}

1.3 `switch` 语句

用于多个固定值的判断，适用于枚举类型。

let fruit = "apple";
switch (fruit) {
  case "apple":
    console.log("苹果");
    break;
  case "banana":
    console.log("香蕉");
    break;
  default:
    console.log("未知水果");
}

📌 注意：必须使用 break 阻止代码“穿透”（fall-through）。

✅ 2. 循环结构（Loop Structures）

2.1 `for` 循环

常用于已知循环次数的场景。

for (let i = 0; i < 5; i++) {
  console.log(i);
}

2.2 `while` 循环

在条件为 true 时重复执行代码块。

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

2.3 `do...while` 循环

至少执行一次循环体，再判断条件。

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

✅ 3. 控制流程语句

3.1 `break`：退出循环或 `switch`

for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i); // 输出 0 到 4
}

3.2 `continue`：跳过当前迭代，继续下一次循环

for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i); // 输出 0,1,3,4
}

✅ 4. 实战练习

练习 1：使用 `switch` 判断星期几

let day = 3;
switch (day) {
  case 1:
    console.log("星期一");
    break;
  case 2:
    console.log("星期二");
    break;
  // ...
  default:
    console.log("无效的星期");
}

📌 问题：如果忘记写 break 会怎样？

练习 2：使用 `for` 循环计算 1 到 100 的和

let sum = 0;
for (let i = 1; i <= 100; i++) {
  sum += i;
}
console.log(sum);

练习 3：使用 `while` 实现用户登录验证

let password = "";
let count = 0;
while (password !== "123456" && count < 3) {
  password = prompt("请输入密码：");
  count++;
  if (password === "123456") {
    console.log("登录成功");
  } else if (count < 3) {
    console.log("密码错误，请重试");
  } else {
    console.log("尝试次数已用尽");
  }
}

🧠 本节重难点分析

🔑 重点内容

知识点	说明
`if...else` 与 `switch`	掌握其语法结构和适用场景
`for`、`while`、`do...while`	理解其执行流程与使用场景
`break` 与 `continue`	掌握其在循环中的控制作用
条件判断与循环嵌套	能处理多层逻辑判断与复杂循环结构

🧩 难点内容

知识点	说明
`switch` 中的“穿透”现象	必须使用 `break` 阻止代码继续执行下一个 `case`
`while` 死循环	条件始终为 `true` 时会无限循环，需谨慎使用
`for` 循环的初始化与条件表达式	初始值、终止条件、步长需正确设置
嵌套循环性能问题	多层嵌套可能导致性能下降，应尽量优化逻辑

📌 第 4 课 10 大高频面试题

1. `if...else` 和 `switch` 的区别是什么？

答案要点：

if...else：适用于范围判断（如 score >= 90）。
switch：适用于多个固定值判断（如 fruit === "apple"）。
switch 必须使用 break 防止“穿透”。

2. `switch` 中不写 `break` 会怎样？

答案要点：

会继续执行下一个 case 或 default，即“穿透”现象。

switch (2) {
  case 1:
    console.log("1");
  case 2:
    console.log("2"); // 执行
  case 3:
    console.log("3"); // 执行
}
// 输出：2 3

3. `for`、`while`、`do...while` 的区别？

答案要点：

for：适合已知循环次数。
while：适合不确定循环次数，先判断后执行。
do...while：先执行一次，再判断条件。

4. `break` 和 `continue` 的作用分别是什么？

答案要点：

break：立即退出循环或 switch。
continue：跳过当前迭代，继续下一次循环。

5. `while (true)` 是死循环吗？如何退出？

答案要点：

是死循环，必须在循环体内使用 break 退出。

while (true) {
  let input = prompt("输入 quit 退出");
  if (input === "quit") break;
}

6. `for` 循环的三个表达式分别是什么？顺序如何？

答案要点：

初始化表达式（let i = 0）
条件表达式（i < 5）
更新表达式（i++）

顺序：初始化 ➜ 条件判断 ➜ 执行循环体 ➜ 更新 ➜ 再判断

7. `do...while` 为什么至少执行一次？

答案要点：

因为先执行循环体，再判断条件。

let i = 10;
do {
  console.log(i);
} while (i < 5);
// 输出：10

8. 如何判断一个数字是奇数还是偶数？

答案要点：

使用取余运算符 %。

let num = 7;
if (num % 2 === 0) {
  console.log("偶数");
} else {
  console.log("奇数");
}

9. 什么是嵌套循环？请举例说明。

答案要点：

在一个循环体内嵌套另一个循环。

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(i, j);
  }
}

10. 使用 `switch` 实现一个简易计算器？

答案要点：

let a = 5, b = 3, op = "+";
switch (op) {
  case "+":
    console.log(a + b);
    break;
  case "-":
    console.log(a - b);
    break;
  default:
    console.log("不支持的操作");
}

🧾 总结

本节课我们系统学习了 JavaScript 中的流程控制结构，包括 if...else、switch 条件语句，以及 for、while、do...while 循环结构。掌握了 break 和 continue 控制流程的方法，并通过实战练习加深了对条件判断和循环嵌套的理解。

通过本节课的学习，你已经具备以下能力：