引言

在编写 JavaScript 代码时，想象一下你是在掌控一台复杂的机器，而这台机器需要根据各种情况做出不同的反应。控制流语句就是你的遥控器，它们决定了代码的执行顺序。通过这些语句，你可以告诉 JavaScript 什么时候该走哪条路、什么时候该停下、什么时候该重新开始。这篇文章会带你轻松了解 JavaScript 中的控制流语句，包括条件语句、循环语句、跳转语句，还有标记语句。

1. 条件语句

条件语句就像是代码中的“红绿灯”，让你的程序可以根据不同的情况采取不同的行动。

1.1 if...else 语句

if...else 语句是编程世界里的老朋友，它根据条件的真假，选择执行不同的代码块。

语法：

if (条件) {
  // 当条件为 true 时执行的代码
} else {
  // 当条件为 false 时执行的代码
}

示例：

let score = 85;

if (score >= 90) {
  console.log("Grade: A"); // 分数在 90 及以上
} else if (score >= 80) {
  console.log("Grade: B"); // 分数在 80 到 89 之间
} else {
  console.log("Grade: C"); // 分数低于 80
}

想象一下，这就像是在发成绩单：如果分数高于 90，你就得了 A；如果在 80 到 89 之间，你得了 B；否则，你得了 C。

关于隐式类型转换的小提示

在使用 if...else 语句时，JavaScript 可能会对条件表达式中的不同类型的值进行隐式类型转换，这有时会带来意想不到的结果。为了避免这种情况，建议使用严格等于运算符（===），它不仅比较值，还比较类型，只有值和类型都相同时才返回 true。

示例：

if (0 == false) {
  console.log("0 等于 false"); // 由于隐式类型转换，这段代码会输出这行内容
} else {
  console.log("0 不等于 false");
}

if (0 === false) {
  console.log("0 严格等于 false");
} else {
  console.log("0 不严格等于 false"); // 这段代码会输出这行内容
}

在这个例子中，0 == false 会返回 true，因为 JavaScript 会尝试将 0 和 false 转换为相同的类型后再进行比较。但 0 === false 会返回 false，因为它们类型不同，不会发生类型转换。

为什么推荐使用 ===？

• 使用 === 可以避免类型转换带来的意外结果，确保你的比较逻辑更加清晰、准确。
• 在实际编程中，使用 === 可以减少调试和排错的时间，因为你明确知道比较的条件。

总结： 在编写条件语句时，养成使用 === 而不是 == 的习惯，将帮助你编写更加可靠的代码。

1.2 switch 语句

当你的条件分支多得有点“花样百出”时，switch 语句会派上用场。它可以帮助你轻松管理多个条件。

语法：

switch (表达式) {
  case 值1:
    // 当表达式等于 值1 时执行的代码
    break;
  case 值2:
    // 当表达式等于 值2 时执行的代码
    break;
  default:
  // 当表达式不等于任何一个值时执行的代码
}

示例：

let day = 3;
let dayName;

switch (day) {
  case 1:
    dayName = "Monday";
    break;
  case 2:
    dayName = "Tuesday";
    break;
  case 3:
    dayName = "Wednesday";
    break;
  default:
    dayName = "Unknown";
}

console.log(`Today is: ${dayName}`); // 输出：Today is: Wednesday

这就像是你在猜星期几：如果是 1，就是星期一；如果是 2，就是星期二；如果是 3，当然是星期三啦！

提示：

• switch 语句的 case 匹配使用的是严格相等运算符（===），所以类型转换是不会发生的。
• 如果忘了 break，代码会继续执行下一个 case，这被称为“贯穿效应”（fall-through）。

2. 循环语句

循环语句让你可以重复做某件事，直到你觉得已经够了。它们就像是一台自动循环播放的唱机，让你在一定条件下重复播放同一首歌。

2.1 for 循环

for 循环是编程中的经典，它常用于需要重复执行已知次数的任务。

语法：

for (初始化; 条件; 递增 / 递减) {
  // 循环中要执行的代码
}

示例：

for (let i = 1; i <= 5; i++) {
  console.log(`Iteration ${i}`); // 依次输出 Iteration 1 到 Iteration 5
}

就像你在数数：从 1 数到 5，每数一个数就报一下。

2.2 while 循环

while 循环就像是在说：“只要这个条件满足，就一直做这件事。”

语法：

while (条件) {
  // 循环中要执行的代码
}

示例：

let count = 0;

while (count < 3) {
  console.log(`Count is: ${count}`);
  count++;
}

在这个例子里，你在做一个简单的计数器，一直数到 3 为止。

2.3 do...while 循环

do...while 循环则稍微不同，它会先做一次，然后再看看是否继续。

语法：

do {
  // 循环中要执行的代码
} while (条件);

示例：

let n = 0;

do {
  console.log(`n is: ${n}`);
  n++;
} while (n < 3);

就像是你决定先尝试一下，然后再决定要不要再来一次。

3. 跳转语句

跳转语句就是你的“快进”或“跳过”按钮。你可以用它们来提前结束某次循环，或者直接跳到下一次。

3.1 break 语句

break 语句是个“退出”按钮，它可以让你提前结束当前的循环或 switch 语句。

示例：

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break; // 循环在 i 等于 5 时退出
  }
  console.log(i);
}
// 输出：1 2 3 4

在这里，当 i 等于 5 时，你按下了“退出”按钮，所以只输出了 1 到 4。

3.2 continue 语句

continue 语句则像是“跳过”按钮，它让你跳过当前循环的剩余部分，直接进入下一次循环。

示例：

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue; // 跳过 i 等于 3 的那次循环
  }
  console.log(i);
}
// 输出：1 2 4 5

当 i 等于 3 时，你选择跳过，所以 3 就没被输出。

提示：

• break 和 continue 在嵌套循环中只影响它们所在的最内层循环。

4. 标记语句

标记语句就像是在循环中做了一个特别标记，当你在多层嵌套的循环中迷路时，它可以帮助你快速找到出口。通过为循环设置一个标签，你可以用 break 或 continue 直接跳出或跳过这个标签对应的循环。

4.1 标记语句与 break 配合使用

示例：

outerLoop: // 这是标记语

句
for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      break outerLoop; // 直接跳出 outerLoop 标记的循环
    }
    console.log(`i = ${i}, j = ${j}`);
  }
}

输出：

i = 0, j = 0
i = 0, j = 1
i = 0, j = 2
i = 1, j = 0

想象一下你在一个多层迷宫中，break outerLoop 就像是触发了一个紧急出口，一下子就从外层的迷宫中逃了出来。

4.2 标记语句与 continue 配合使用

示例：

outerLoop: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      continue outerLoop; // 跳过外层循环的当前迭代，继续下一次外层循环
    }
    console.log(`i = ${i}, j = ${j}`);
  }
}

输出：

i = 0, j = 0
i = 0, j = 1
i = 0, j = 2
i = 1, j = 0
i = 2, j = 0
i = 2, j = 1
i = 2, j = 2

这次你跳过了外层迷宫的一个部分，直接进入了下一个循环，这样就节省了时间。

提示：

• 虽然标记语句很强大，但使用时要小心，因为它们可能让代码变得难以阅读。只有在必要时使用它们。

结论

掌握控制流语句就像是掌握了代码中的指挥棒。通过条件语句，你可以引导程序走不同的道路；通过循环语句，你可以让程序重复执行任务；通过跳转语句，你可以控制循环的节奏；通过标记语句，你可以在复杂的代码中轻松找到出口。继续学习，你会发现更多有趣的编程技巧！

社区与资源

想进一步学习和探索 JavaScript 吗？以下是一些推荐的社区和资源：

• MDN Web Docs - Control Flow - 控制流语句的权威文档和教程。
• JavaScript.info - Control Structures - 详细的控制流结构解释。
• Stack Overflow - 解决 JavaScript 编程问题的社区。