JavaScript 教程：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!

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

JavaScript 循环控制概述

break 语句：提前退出循环

continue 语句：跳过当前迭代

使用标签语句精确控制嵌套循环

实用工具推荐