JavaScript - while 迴圈

JavaScript 中的 while 語句建立一個迴圈，只要指定的條件為 true，就會重複執行一段程式碼塊。條件會在程式碼塊執行之前進行評估。

在編寫程式時，您可能會遇到需要反覆執行某個操作的情況。在這種情況下，您需要編寫迴圈語句以減少程式碼行數。

JavaScript 支援所有必要的迴圈來減輕程式設計壓力。在本章中，我們將討論 while 迴圈。

JavaScript 中有兩種 while 迴圈，如下所示。

入口控制迴圈 - 迴圈首先檢查迴圈條件是否有效，然後進入迴圈體執行迴圈語句。
出口控制迴圈 - 迴圈進入迴圈體並執行迴圈語句，而不檢查條件。完成迭代後，它會檢查條件。

JavaScript while 迴圈

JavaScript 中最基本的迴圈是 while 迴圈，將在本章中討論。while 迴圈是入口控制迴圈。

while 迴圈的目的是隻要 表示式 為真，就重複執行語句或程式碼塊。一旦表示式變為 false，迴圈就會終止。

流程圖

while 迴圈 的流程圖如下所示：

語法

JavaScript 中 while 迴圈 的語法如下所示：

while (expression) {
   Statement(s) to be executed if expression is true
}

示例

在下面的示例中，我們定義了 'count' 變數並將其初始化為 0。之後，我們使用 while 迴圈進行迭代，直到 count 的值小於 10。

<html>
<body>
    <div id = 'output'></div>
    <script type="text/javascript">
        let output = document.getElementById("output");
        var count = 0;
        output.innerHTML="Starting Loop <br>";
        while (count < 10) {
            output.innerHTML+="Current Count : " + count + "<br>";
            count++;
        }
        output.innerHTML+="Loop stopped!";
    </script>
    <p> Set the variable to a different value and then try... </p>
</body>
</html>

輸出

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
Set the variable to different value and then try...

JavaScript do...while 迴圈

do...while 迴圈類似於 while 迴圈，只是條件檢查發生在迴圈的末尾。這意味著迴圈將始終至少執行一次，即使條件為 false。

流程圖

do-while 迴圈的流程圖如下所示：

語法

JavaScript 中 do-while 迴圈的語法如下所示：

do {
   Statement(s) to be executed;
} while (expression);

請勿錯過 do...while 迴圈末尾使用的分號。

示例

在下面的示例中，我們使用了 do...while 迴圈並在輸出中列印結果，直到 count 變數的值小於 5。在輸出中，我們可以觀察到它始終執行一次，即使條件為假。

<html>
<body>
    <div id="output"></div>
    <script type="text/javascript">
        let output = document.getElementById("output");
        var count = 0;
        output.innerHTML += "Starting Loop" + "<br />";
        do {
            output.innerHTML += "Current Count : " + count + "<br />";
            count++;
        }
        while (count < 5);
        output.innerHTML += "Loop stopped!";
    </script>
    <p>Set the variable to a different value and then try...</p>
</body>
</html>

輸出

Starting Loop
Current Count : 0 
Current Count : 1 
Current Count : 2 
Current Count : 3 
Current Count : 4
Loop Stopped!
Set the variable to different value and then try...

JavaScript while 與 for 迴圈

JavaScript while 迴圈類似於省略了第一個和第三個表示式的 for 迴圈。當迭代次數固定且已知時，通常使用 for 迴圈，但當迭代次數未知時，我們使用 while 迴圈。

示例

讓我們以使用 for 迴圈列印前五個自然數為例：

<html>
<body>
  <p> First five natural numbers:</p>
  <div id = "demo"> </div>
  <script>  
    const output = document.getElementById("demo");
    for(let i = 1; i <= 5; i++){
      output.innerHTML += i + "<br>";
    }
  </script>
</body>
</html>

它將產生以下輸出：

First five natural numbers:
1
2
3
4
5

示例

現在我們可以修改上面的 for 迴圈如下：

<html>
<body>
  <p> First five natural numbers:</p>
  <div id = "demo"> </div>
  <script>  
    const output = document.getElementById("demo");
    let i = 1;
    for(; i <= 5; ){
      output.innerHTML += i + "<br>";
      i++
    }
  </script>
</body>
</html>

輸出

First five natural numbers:

1
2
3
4
5

示例

在上面的示例中，我們省略了 for 迴圈語句中的第一個和第三個表示式。這類似於 while 迴圈語句。請看下面的示例：

<html>
<body>
  <p> First five natural numbers:</p>
  <div id = "demo"> </div>
  <script>  
    const output = document.getElementById("demo");
    let i = 1;
    while(i <= 5){
      output.innerHTML += i + "<br>";
      i++
    }
  </script>
</body>
</html>

輸出

First five natural numbers:

1
2
3
4
5

你會注意到，沒有第一個表示式（初始化）和第三個表示式（迭代）的 for 迴圈，類似於 while 迴圈。

列印頁面