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

打印页面