JavaScript 循环控制

JavaScript 提供了完整的控制机制来处理循环和开关语句。可能会出现需要在没有到达循环底部的情况下提前退出循环的情况。也可能出现想要跳过代码块的一部分并开始下一次循环迭代的情况。

为了处理所有这些情况，JavaScript 提供了 break 和 continue 语句。这些语句分别用于立即退出任何循环或开始下一次循环迭代。此外，JavaScript 允许开发者使用标签来命名循环。

我们在下面的表格中解释了可以用来控制循环的关键字。

关键字	解释
`break`	`break` 关键字用于完全退出循环。
`continue`	`continue` 关键字用于跳过当前循环迭代。
`标签`	标签不是关键字，但你可以使用任何标识符后面跟一个冒号 (`:`) 来给循环加上标签。之后，你可以使用标签配合 `break` 和 `continue` 关键字来针对特定的循环。

在后面的章节中，我们将详细介绍 break、continue 和标签语句。

`break` 语句

JavaScript break 语句，最初是在介绍 switch 语句时提到的，用于提前退出循环，跳出封闭的大括号。

Break Statement

示例

下面的例子展示了如何在 while 循环中使用 break 语句。注意当 x 达到 5 时，循环提前结束。

<html>
<body>     
   <div id="output"></div>  
   <script>
      const coutput = document.getElementById("output");
      let x = 1;
      coutput.innerHTML = "进入循环<br>";
      while (x < 20) {
         if (x == 5) {
            break;   // 完全跳出循环
         }
         x = x + 1;
         coutput.innerHTML += x + "<br>";
      }         
      coutput.innerHTML += "退出循环!<br>";
   </script>
   <p>设置变量为不同的值然后再次尝试...</p>
</body>
</html>

输出：

进入循环
2
3
4
5
退出循环!
设置变量为不同的值然后再次尝试...

`continue` 语句

JavaScript continue 语句告诉解释器立即开始下一次循环迭代并跳过剩余的代码块。当遇到 continue 语句时，程序流立即移动到循环检查表达式；如果条件仍然为真，则开始下一次迭代，否则控制权退出循环。

示例

此示例展示了如何在 while 循环中使用 continue 语句。注意当变量 x 的值达到 5 时，continue 语句用于跳过打印操作。

<html>
<body>     
   <div id="output"></div>  
   <script>
      const coutput = document.getElementById("output");
      let x = 1;
      coutput.innerHTML = "进入循环<br>";
      while (x < 10) {
         x = x + 1;
         if (x == 5) {
            continue; // 跳过当前循环体的剩余部分
         }
         coutput.innerHTML += x + "<br>";
      }         
      coutput.innerHTML += "退出循环!<br>";
   </script>
   <p>设置变量为不同的值然后再次尝试...</p>
</body>
</html>

输出：

进入循环
2
3
4
6
7
8
9
10
退出循环!
设置变量为不同的值然后再次尝试...

使用标签来控制流程

从 JavaScript 1.2 开始，可以使用标签与 break 和 continue 一起更精确地控制流程。标签只是一个标识符后面跟着一个冒号 (:)，它可以应用到一个语句或一段代码块上。我们将通过两个不同的例子来了解如何使用标签与 break 和 continue 一起。

continue 或 break 语句与其标签名之间不允许有换行。此外，标签名与相关的循环之间也不应该有任何其他语句。

尝试以下两个例子以更好地理解标签。

示例 1

下面的例子展示了如何实现带 break 语句的标签。

在下面的例子中，我们给循环加上了 outerloop 和 innerloop 标签。

我们在嵌套循环中使用了带标签的 break 语句。在输出中，你可以看到它从内部循环中断了外部循环。

<html>
<body>     
   <div id="output"></div>  
   <script>
      const coutput = document.getElementById("output");
      coutput.innerHTML = "进入循环!<br>";
      outerloop:        // 这是标签名         
      for (let i = 0; i < 5; i++) {
         coutput.innerHTML += "外层循环: " + i + "<br>";
         innerloop:
         for (let j = 0; j < 5; j++) {
            if (j > 3) break;           // 退出最内层循环
            if (i == 2) break innerloop;  // 做同样的事
            if (i == 4) break outerloop;  // 退出外层循环
            coutput.innerHTML += "内层循环: " + j + " <br>";
         }
      }        
      coutput.innerHTML += "退出循环!<br>";
   </script>
</body>
</html>

输出：

进入循环!
外层循环: 0
内层循环: 0
内层循环: 1
内层循环: 2
内层循环: 3
外层循环: 1
内层循环: 0
内层循环: 1
内层循环: 2
内层循环: 3
外层循环: 2
外层循环: 3
内层循环: 0
内层循环: 1
内层循环: 2
内层循环: 3
外层循环: 4
退出循环!

示例 2

在下面的代码中，我们在嵌套循环中使用了带标签的 continue 语句来跳过当前外层循环的迭代。每当 q 的值变成 3 时，它就会跳过当前迭代的剩余代码并开始新的迭代。

<html>
<head>
   <title>JavaScript - 标签语句</title>
</head>
<body>
   <p id="output"></p>
   <script>
      let coutput = document.getElementById("output");
      coutput.innerHTML += "进入循环!<br>";
      outerloop:     // 这是标签名
      for (let p = 0; p < 3; p++) {
         coutput.innerHTML += "外层循环: " + p + "<br>";
         for (let q = 0; q < 5; q++) {
            if (q == 3) {
               continue outerloop;
            }
            coutput.innerHTML += "内层循环: " + q + "<br>";
         }
      }
      coutput.innerHTML += "退出循环!<br>";
   </script>
</body>
</html>

输出：

进入循环!
外层循环: 0
内层循环: 0
内层循环: 1
内层循环: 2
外层循环: 1
内层循环: 0
内层循环: 1
内层循环: 2
外层循环: 2
内层循环: 0
内层循环: 1
内层循环: 2
退出循环!