详解 JavaScript 循环控制语句：break、continue 与标签

拾光

发布时间：2026-10-13 | 5人浏览过

原创

掌握 break 和 continue 是优化 JavaScript 循环逻辑的关键。本文结合代码实例，清晰解释如何提前终止循环、跳过特定迭代，并利用标签功能在复杂嵌套结构中精准控制程序执行路径。

结果与目标

在编写 JavaScript 脚本时，有时需要在未达到循环底部条件时提前结束循环，或者在满足特定条件时跳过当前迭代的剩余代码直接进入下一次循环。此外，在多层嵌套循环中，可能需要跳出内层或外层特定循环。JavaScript 提供了 break、continue 以及标签（label）机制来解决这些问题。

准备条件

理解基础的循环结构（如 while、for）及其执行原理。确保运行环境支持标准的 ECMAScript 语法，以下示例基于标准 JavaScript 环境演示。

真实操作顺序

第1步：使用 break 语句提前退出循环

目的：当满足某个特定条件时，完全终止并退出当前所在的循环块，执行循环后的代码。
入口：循环体内任意位置。
动作：使用关键字 break。
重要参数：无。
完成状态：控制权转移到循环块闭合括号之外的下一条语句。

以下示例展示了如何在 while 循环中，当变量 x 等于 5 时使用 break 强制退出循环：

<script type="text/javascript">
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 20)
{
 if (x == 5) { 
   break; // 完全跳出循环
 }
 x = x + 1;
 document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
</script>

执行结果：

Entering the loop
2
3
4
5
Exiting the loop!

注意：虽然输出中包含 5，但这是因为 document.write 在判断之前并未被阻止，实际上 break 发生在条件判断后，但在下一次迭代前。更常见的用法是在条件满足时立即阻断后续处理。若严格遵循上述代码逻辑，5 被打印是因为它在 if 判断之前已被处理（此处原意通常是为了演示跳出点，实际业务中需在需跳过的逻辑前放置 break）。在上述特定代码结构中，5 被打印后触发 break，随后输出退出信息。

第2步：使用 continue 语句跳过当前迭代

目的：跳过当前迭代中剩余的代码，直接开始下一次循环迭代。
入口：循环体内。
动作：使用关键字 continue。
完成状态：程序跳到循环顶部，重新评估循环条件。若条件仍为真，则进入下一轮迭代；否则退出循环。

以下示例演示在 while 循环中，当 x 等于 5 时跳过打印步骤：

<script type="text/javascript">
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 10)
{
 x = x + 1;
 if (x == 5) { 
   continue; // 跳过本次剩余代码，进入下次迭代
 }
 document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
</script>

执行结果：

Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!

可以看到，数字 5 被成功跳过，没有出现在输出中。

第3步：利用标签（Label）精确控制嵌套循环

目的：在多层嵌套循环中，默认情况下 break 和 continue 只影响它们所在的最近一层循环。通过为循环添加标签，可以指定打破或继续哪一层的循环。
入口：循环语句前。
动作：定义格式为 labelName: statement，并在 break 或 continue 后跟随该标签名。
注意：标签名称必须是合法的标识符，且后面必须紧跟冒号，不应有换行符分割标签名与循环。

场景 A：打破特定外层循环

<script type="text/javascript">
document.write("Entering the loop!<br /> ");
outerloop: for (var i = 0; i < 5; i++)
{
 document.write("Outerloop: " + i + "<br />");
 innerloop:
 for (var j = 0; j < 5; j++)
 {
   if (j > 3) break;     // 打破内层循环
   if (i == 2) break innerloop; // 打破名为 innerloop 的内层循环
   if (i == 4) break outerloop; // 打破名为 outerloop 的外层循环
   document.write("Innerloop: " + j + " <br />");
 }
}
document.write("Exiting the loop!<br /> ");
</script>

场景 B：继续特定外层循环

<script type="text/javascript">
document.write("Entering the loop!<br /> ");
outerloop: for (var i = 0; i < 3; i++)
{
 document.write("Outerloop: " + i + "<br />");
 for (var j = 0; j < 5; j++)
 {
   if (j == 3) {
     continue outerloop; // 跳过外层循环剩余部分，进入下一轮外层迭代
   }
   document.write("Innerloop: " + j + "<br />");
 }
}
document.write("Exiting the loop!<br /> ");
</script>

在这两个例子中，标签允许开发者跳出复杂的嵌套逻辑，而不必依赖标志变量或函数返回来模拟深层跳出。