JavaScript 循环控制：break、continue 与标签语句详解
本文详细解析 JavaScript 中的循环控制机制，重点介绍 break 和 continue 语句的用法及区别。通过 while 和 for 循环示例，展示如何提前退出循环或跳过特定迭代。此外，还讲解了从 JavaScript 1.2 开始支持的标签语句（label），用于在嵌套循环中精确控制 break 和 continue 的目标层级，帮助开发者更灵活地管理程序流程。
JavaScript 循环控制概述
JavaScript 提供了对循环和 switch 语句的完全控制能力。在实际开发中，可能会遇到需要在循环未达到底部时提前退出的情况；或者需要跳过当前迭代的剩余代码，直接进入下一次迭代的需求。
针对上述场景，JavaScript 提供了 break 和 continue 两个关键字。它们的作用分别是立即终止当前循环的执行，或者跳过当前迭代的剩余部分并启动下一次迭代。 break 语句:
break 语句：提前退出循环
break 语句此前已在 switch 语句中介绍过，它用于在循环执行过程中提前退出，跳出包含该循环的大括号范围。 示例如下：
以下示例展示了 break 语句在 while 循环中的具体应用。请注意，当变量 x 的值达到 5 时，循环会被立即终止。document.write(...) 语句位于右大括号之前，因此不会执行到 x=5 时的输出。 代码实现如下：
<script type="text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 20)
{
if (x == 5){
break; // breaks out of loop completely
}
x = x + 1;
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
运行上述代码将产生以下输出结果：
Entering the loop
2
3
4
5
Exiting the loop!
前面已经介绍了 break 语句在 switch 结构中的用法。 接下来介绍 continue 语句：
continue 语句：跳过当前迭代
continue 语句的作用是通知 JavaScript 解释器立即开始下一次循环迭代，并跳过当前迭代中剩余的代码块。 具体行为如下：
当程序执行到 continue 语句时，流程会立即跳转到循环的条件检查表达式。如果条件仍为真，则开始下一次迭代；否则，控制流将退出循环。 示例如下：
此示例展示了 continue 语句在 while 循环中的应用。注意，当指数变量 x 等于 5 时，continue 语句会跳过打印操作，直接进入下一次迭代。 代码实现如下：
<script type="text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 10)
{
x = x + 1;
if (x == 5){
continue; // skill rest of the loop body
}
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!
使用标签语句精确控制嵌套循环
使用标签（label）来控制流程：
从 JavaScript 1.2 版本开始，标签可以与 break 和 continue 结合使用，从而实现对流程更精确的控制，特别是在处理嵌套循环时。 具体规则如下：
标签是一个简单的标识符，后跟一个冒号，置于语句或代码块之前。下面通过两个不同的示例来展示标签在 break 和 continue 中的具体用法。 注意事项：
注意：在 continue 或 break 语句与其标签名称之间允许存在换行符。此外，标签名称与相关联的循环之间不应包含其他任何语句。 实例 1：
<script type="text/javascript">
<!--
document.write("Entering the loop!<br /> ");
outerloop: // This is the label name
for (var i = 0; i < 5; i++)
{
document.write("Outerloop: " + i + "<br />");
innerloop:
for (var j = 0; j < 5; j++)
{
if (j > 3 ) break ; // Quit the innermost loop
if (i == 2) break innerloop; // Do the same thing
if (i == 4) break outerloop; // Quit the outer loop
document.write("Innerloop: " + j + " <br />");
}
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
运行实例 1 将产生以下输出结果：
Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 2
Outerloop: 3
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 4
Exiting the loop!
实例 2：
<script type="text/javascript">
<!--
document.write("Entering the loop!<br /> ");
outerloop: // This is the label name
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>
运行实例 2 将产生以下输出结果：
Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 2
Innerloop: 0
Innerloop: 1
Innerloop: 2
Exiting the loop!
JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组？
2026-11-05 09:59:18