Javascript 简明教程

JavaScript - For Loop

JavaScript for 循环用于反复执行某个代码块，直到指定的条件计算结果为假。如果迭代次数已知且固定，它可用于迭代。

JavaScript 循环用于反复执行特定代码块。“for”循环是循环的最紧凑形式。它包括以下三个重要部分 −

  1. Initialization − 循环初始化表达式是我们向计数器赋初始值的地方。在循环开始之前会执行初始化语句。

  2. Condition − 条件表达式将测试给定条件是否为真。如果条件为真，那么循环中的代码将被执行。否则，控制权将脱离循环。

  3. Iteration − 迭代表达式是你可以增大或减小计数器的地方。

你可以用分号分隔三个部分，把它们放在一行中。

Flow Chart

for 循环在 JavaScript 中的流程图如下 −

for loop

Syntax

for 循环在 JavaScript 中的语法如下 −

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

Examples

尝试以下示例来了解 for 循环在 JavaScript 中的工作原理。

Example: Executing a code block repeatedly

在下面的示例中，我们使用了 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>

Output

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!

Example: Initialization is optional

以下代码说明了 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

Example: Conditional statement is optional

以下代码说明了 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

Example: Iteration statement is optional

在 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