JavaScript - 迴圈控制

JavaScript 迴圈控制

JavaScript 提供了完全控制來處理迴圈和 switch 語句。可能會有這樣的情況，你需要在到達迴圈底部之前退出迴圈。也可能會有這樣的情況，你想跳過程式碼塊的一部分並開始迴圈的下一個迭代。

為了處理所有這些情況，JavaScript 提供了 break 和 continue 語句。這些語句分別用於立即退出任何迴圈或開始任何迴圈的下一個迭代。此外，JavaScript 允許開發人員使用標籤為迴圈命名。

我們在下表中解釋了這些關鍵字，它們可以用於控制迴圈。

關鍵字	解釋
break	“break” 關鍵字用於退出迴圈。
continue	“continue” 關鍵字用於跳過迴圈的當前迭代。
標籤	“標籤” 不是關鍵字，但您可以使用任何識別符號後跟冒號 (:) 為迴圈指定標籤。之後，您可以使用該標籤透過 break 和 continue 關鍵字來定位特定的迴圈。

在接下來的章節中，我們將詳細學習 break、continue 和標籤語句。

Break 語句

JavaScript 的 break 語句（在 switch 語句中簡要介紹過）用於提前退出迴圈，跳出封閉的大括號。

流程圖

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

示例

以下示例說明了在 while 迴圈中使用 break 語句。請注意，一旦 x 達到 5 並達到 -，迴圈是如何提前退出的：

<html>
<body>     
   <div id = "output"> </div>  
   <script>
      const coutput = document.getElementById("output");
      let x = 1;
      coutput.innerHTML = "Entering the loop<br> ";
      while (x < 20) {
         if (x == 5) {
            break;   // breaks out of loop completely
         }
         x = x + 1;
         coutput.innerHTML +=  x + "<br>";
      }         
      coutput.innerHTML += "Exiting the loop!<br> ";
   </script>
   <p>Set the variable to different value and then try...</p>
</body>
</html>

輸出

Entering the loop
2
3
4
5
Exiting the loop!
Set the variable to different value and then try...

Continue 語句

JavaScript 的 continue 語句告訴直譯器立即開始迴圈的下一個迭代並跳過剩餘的程式碼塊。當遇到 continue 語句時，程式流程會立即移動到迴圈檢查表示式，如果條件仍然為真，則它開始下一個迭代，否則控制權將退出迴圈。

示例

此示例說明了在 while 迴圈中使用 continue 語句。請注意，如何使用 continue 語句在變數 x 中儲存的索引達到 5 時跳過列印：

<html>
<body>     
   <div id = "output"> </div>  
   <script>
      const coutput = document.getElementById("output");
      let x = 1;
      coutput.innerHTML = "Entering the loop<br> ";
      while (x < 10) {
         x = x + 1;
         if (x == 5) {
            continue; // skip rest of the loop body
         }
         coutput.innerHTML +=  x + "<br>";
      }         
      coutput.innerHTML += "Exiting the loop!<br> ";
   </script>
   <p>Set the variable to different value and then try...</p>
</body>
</html>

輸出

Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!
Set the variable to different value and then try...

使用標籤控制流程

從 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");
      output.innerHTML = "Entering the loop!<br /> ";
      outerloop:        // This is the label name         
      for (let i = 0; i < 5; i++) {
         output.innerHTML += "Outerloop: " + i + "<br />";
         innerloop:
         for (let 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
            output.innerHTML += "Innerloop: " + j + " <br />";
         }
      }        
      output.innerHTML += "Exiting the loop!<br /> ";      
   </script>
</body>
</html>

輸出

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

在下面的程式碼中，我們在巢狀迴圈內部使用帶標籤的 continue 語句來跳過外迴圈的當前迭代。每當 q 的值變為 3 時，它都會跳過當前迭代的剩餘程式碼的執行並開始新的迭代。

<html>
<head>
   <title> JavaScript - Label statement </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      output.innerHTML += "Entering the loop!<br /> ";
      outerloop:     // This is the label name
      for (let p = 0; p < 3; p++) {
         output.innerHTML += "Outerloop: " + p + "<br />";
         for (let q = 0; q < 5; q++) {
            if (q == 3) {
               continue outerloop;
            }
            output.innerHTML += "Innerloop: " + q + "<br />";
         }
      }
      output.innerHTML += "Exiting the loop!<br /> ";
   </script>
</body>
</html>

輸出

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!

列印頁面