JavaScript - For 循环
JavaScript 的 for 循环用于重复执行一段代码块，直到指定的条件评估为 false。它可用于迭代，当迭代次数固定且已知时。
JavaScript 循环用于重复执行特定的代码块。for 循环是循环的最紧凑形式。它包含以下三个重要部分：
初始化 − 循环初始化表达式是我们将计数器初始化为起始值的地方。初始化语句在循环开始前执行。
条件 − 条件表达式用于测试给定条件是否为真。如果条件为真，则执行循环内的代码。否则，控制将跳出循环。
迭代 − 迭代表达式是您可以增加或减少计数器的地方。
您可以将这三个部分放在一行中，用分号分隔。
流程图
JavaScript 中 for 循环的流程图如下所示 −
语法
JavaScript 中 for 循环的语法如下所示 −
for (initialization; condition; iteration) {
Statement(s) to be executed if condition is true
}
以上所有 3 个语句均为可选。
示例
尝试以下示例来学习 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 = "";
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