JavaScript - for 迴圈

JavaScript 的for迴圈用於重複執行一段程式碼塊，直到指定的條件計算結果為false。如果迭代次數是固定的且已知的，則可以使用它進行迭代。

JavaScript 迴圈用於重複執行特定的程式碼塊。'for'迴圈是最緊湊的迴圈形式。它包括以下三個重要部分：

初始化 - 迴圈初始化表示式是我們將計數器初始化為起始值的地方。初始化語句在迴圈開始之前執行。
條件 - 條件表示式將測試給定條件是否為真。如果條件為真，則將執行迴圈內給出的程式碼。否則，控制將退出迴圈。
迭代 - 迭代表達式是您可以增加或減少計數器的地方。

您可以將所有三個部分放在一行中，用分號分隔。

流程圖

JavaScript 中for迴圈的流程圖如下：

語法

JavaScript 中for迴圈的語法如下：

for (initialization; condition; iteration) {
   Statement(s) to be executed if condition is true
}

以上所有三個語句都是可選的。

示例

嘗試以下示例以瞭解for迴圈在 JavaScript 中的工作方式。

示例：重複執行程式碼塊

在下面的示例中，我們使用 for 迴圈來列印 'count' 變數的更新值輸出。在迴圈的每次迭代中，我們將 'count' 的值加 1 並列印在輸出中。

<html>
<head>
    <title> JavaScript - for loop </title>
</head>
<body>
    <p id = "output"> </p>
    <script>        
        const output = document.getElementById("output");
        output.innerHTML = "Starting Loop <br>";
        let count;
        for (let count = 0; count < 10; count++) {
            output.innerHTML += "Current Count : " + count + "<br/>";
        }
        output.innerHTML += "Loop stopped!";
    </script>
</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!

示例：初始化是可選的

以下程式碼演示了 for 迴圈中的第一個語句是可選的。您也可以在迴圈外部初始化變數並將其與迴圈一起使用。

每當您需要使用迴圈變數時，即使在迴圈執行完成後，您也可以在迴圈的父作用域中初始化一個變數，就像我們在下面的程式碼中所做的那樣。我們還在迴圈外部列印 p 的值。

<html>
<head>
    <title> Initialization is optional in for loop </title>
</head>
<body>
    <p id = "output"> </p>
    <script>
        let output = document.getElementById("output");
        var p = 0;
        for (; p < 5; p++) {
            output.innerHTML += "P -> " + p + "<br/>";
        }
        output.innerHTML += "Outside the loop! <br>";
        output.innerHTML += "P -> " + p + "<br/>";
    </script>
</body>
</html>

輸出

P -> 0
P -> 1
P -> 2
P -> 3
P -> 4
Outside the loop!
P -> 5

示例：條件語句是可選的

以下程式碼演示了 for 迴圈中的條件語句是可選的。但是，如果您不編寫任何條件，它將進行無限次迭代。因此，您可以將 'break' 關鍵字與 for 迴圈一起使用以停止迴圈的執行，就像我們在下面的程式碼中所做的那樣。

<html>
<head>
    <title> Conditional statement is optional in for loop </title>
</head>
<body>
    <p id = "output"> </p>
    <script>
        let output = document.getElementById("output");
        let arr = [10, 3, 76, 23, 890, 123, 54]
        var p = 0;
        for (; ; p++) {
            if (p >= arr.length) {
                break;
            }
            output.innerHTML += "arr[" + p + "] -> " + arr[p] + "<br/>";
        }
    </script>
</body>
</html>

輸出

arr[0] -> 10
arr[1] -> 3
arr[2] -> 76
arr[3] -> 23
arr[4] -> 890
arr[5] -> 123
arr[6] -> 54

示例：迭代語句是可選的

在 for 迴圈中，第三個語句也是可選的，用於遞增迭代變數。另一種解決方案是，我們可以在迴圈體內部更新迭代變數。

<html>
<head>
    <title> Iteration statement is optional </title>
</head>
<body>
    <p id = "output"> </p>
    <script>
        let output = document.getElementById("output");
        let str = "Tutorialspoint";
        var p = 0;
        for (; ;) {
            if (p >= str.length) {
                break;
            }
            output.innerHTML += "str[" + p + "]  -> " + str[p] + "<br/>";
            p++;
        }
    </script>
</body>
</html>

輸出

str[0] -> T
str[1] -> u
str[2] -> t
str[3] -> o
str[4] -> r
str[5] -> i
str[6] -> a
str[7] -> l
str[8] -> s
str[9] -> p
str[10] -> o
str[11] -> i
str[12] -> n
str[13] -> t

列印頁面