JavaScript - break 語句

JavaScript 中的break語句用於終止迴圈或switch case語句。當與迴圈一起使用時，控制流將跳出迴圈並繼續執行其他程式碼。

break語句也可以用於在帶標籤的語句內部跳出帶標籤的語句。它是控制 JavaScript 程式碼執行流程的有用工具。

語法

JavaScript 中 break 語句的語法如下：

break;
OR
break [label];

break 語句中的標籤是可選的。

注意 - 在下一章中，我們將學習如何在迴圈內部使用帶標籤的 break 語句。

流程圖

break 語句的流程圖如下所示：

示例（for 迴圈中的 break 語句）

在下面的示例中，我們使用 for 迴圈進行迭代。我們使用 'if' 語句在迴圈中添加了條件表示式。當 'x' 的值為 5 時，它將使用 break 語句中斷迴圈。

下面的程式碼只打印 1 到 4 的值。

<html>
<head>
   <title> JavaScript - Break statement </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      output.innerHTML += "Entering the loop. <br /> ";
      for (let x = 1; x < 10; x++) {
         if (x == 5) {
            break;   // breaks out of loop completely
         }
            output.innerHTML += x + "<br />";
      }
      output.innerHTML += "Exiting the loop!<br /> ";
   </script>
</body>
</html>

輸出

Entering the loop.
1
2
3
4
Exiting the loop!

示例（while 迴圈中的 break 語句）

下面的程式碼演示了帶有 'break' 語句的 while 迴圈。在 while 迴圈中，無論 x 的值為 3 還是 7，它都將使用 'break' 語句終止迴圈。

在程式碼中，我們在檢查條件後更新值。因此，它將首先列印 3，然後在下一次迭代中終止迴圈。

<html>
<head>
   <title> JavaScript - Break statement </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      var x = 1;
      output.innerHTML += "Entering the loop. <br /> ";
      while (x < 10) {
         if (x == 3 || x == 7) {
            break;   // breaks out of loop completely
         }
         x = x + 1;
         output.innerHTML += x + "<br />";
      }
      output.innerHTML += "Exiting the loop!<br /> ";
   </script>
</body>
</html>

輸出

Entering the loop.
2
3
Exiting the loop!

巢狀迴圈中的 break 語句

當您有巢狀迴圈時，可以使用 'break' 語句跳出任何迴圈。例如，如果您在父迴圈中使用 'break' 語句，則程式碼也將終止所有巢狀迴圈的迭代。在巢狀迴圈中使用 'break' 語句將只終止巢狀迴圈。

示例

在下面的示例中，x 是父迴圈的迴圈變數，y 是子迴圈的迴圈變數。

在巢狀迴圈中，每當 y 變成 3 時，它將中斷迴圈；在外迴圈中，每當 x 變成 3 時，它將中斷迴圈。您不會在輸出中看到 x > 3 或 y > 2。

<html>
<head>
   <title> JavaScript - Break statement </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      output.innerHTML += "Entering the loop. <br /> ";
      for (let x = 1; x < 10; x++) {
         for (let y = 1; y < 10; y++) {
            if (y == 3) {
               break; // breaks inner loop
            }
            output.innerHTML += x + " " + y + "<br />";
         }
         if (x == 3) {
            break; // break outer loop
         }
      }
      output.innerHTML += "Exiting the loop!<br /> ";
   </script>
</body>
</html>

輸出

Entering the loop.
1 1
1 2
2 1
2 2
3 1
3 2
Exiting the loop!

switch case 語句中的 break 語句

switch case 語句根據條件表示式執行多個程式碼塊中的一個。'break' 語句在將一個或多個 case 與條件表示式的值匹配後終止 switch case 語句。

示例

在下面的程式碼中，我們使用每個 case 的 'break' 語句。這裡，變數 p 的值作為 switch case 語句的條件表示式。它與 'case 10' 匹配。因此，程式碼將執行該特定程式碼塊並使用 'break' 語句終止 switch case 語句。

<html>
<head>
   <title> JavaScript - Break statement </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      var p = 10;
      switch (p) {
         case 10:
            output.innerHTML = "p is 10";
            break;
         case 20:
            output.innerHTML = "p is 20";
            break;
         case 30:
            output.innerHTML = "p is 30";
            break;
         default:
            output.innerHTML = "p is not 10, 20 or 30";
      }
   </script>
</body>
</html>

輸出

p is 10

列印頁面