Javascript 简明教程

JavaScript - For Loop

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

The JavaScript for loop is used to execute a block of code repeteatedly, until a specified condition evaluates to false. It can be used for iteration if the number of iteration is fixed and known.

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

The JavaScript loops are used to execute the particular block of code repeatedly. The 'for' loop is the most compact form of looping. It includes the following three important parts −

  1. Initialization − The loop initialization expression is where we initialize our counter to a starting value. The initialization statement is executed before the loop begins.

  2. Condition − The condition expression which will test if a given condition is true or not. If the condition is true, then the code given inside the loop will be executed. Otherwise, the control will come out of the loop.

  3. Iteration − The iteration expression is where you can increase or decrease your counter.

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

You can put all the three parts in a single line separated by semicolons.

Flow Chart

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

The flow chart of a for loop in JavaScript would be as follows −

for loop

Syntax

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

The syntax of for loop is JavaScript is as follows −

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

Examples

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

Try the following examples to learn how a for loop works in JavaScript.

Example: Executing a code block repeatedly

在下面的示例中，我们使用了 for 循环来打印“count”变量的输出更新值。在每个循环迭代中，我们将“count”的值增加 1 并打印在输出中。

In the example below, we used the for loop to print the output’s updated value of the 'count' variable. In each iteration of the loop, we increment the value of 'count' by 1 and print in the output.

<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 循环中的第一条语句是可选的。你还可以初始化循环之外的变量并将其与循环一起使用。

The below code demonstrates that the first statement is optional in the for loop. You can also initialize the variable outside the loop and use it with the loop.

只要你需要使用循环变量，即使在循环执行完成后，你可以在循环的父作用域中初始化一个变量，正如我们在下面的代码中所做的那样。我们还在循环外打印 p 的值。

Whenever you need to use the looping variable, even after the execution of the loop is completed, you can initialize a variable in the parent scope of the loop, as we have done in the below code. We also print the value of p outside the loop.

<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 循环一起使用来停止循环的执行，就像我们在下面的代码中所做的那样。

The below code demonstrates that the conditional statement in the for loop is optional. However, if you don’t write any condition, it will make infinite iterations. So, you can use the 'break' keyword with the for loop to stop the execution of the loop, as we have done in the below code.

<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 循环中，第三条语句也是可选的，用于增加迭代变量。另一种方法是我们可以在循环体内更新迭代变量。

In the for loop, the third statement is also optional and is used to increment the iterative variable. The alternative solution is that we can update the iterative variable inside the loop body.

<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