JavaScript 的 for 循环用于重复执行一段代码块，直到指定的条件变为假。如果迭代次数是固定的并且已知，可以使用 for 循环进行迭代。
JavaScript 的循环用于重复执行特定的代码块。for 循环是最紧凑的循环形式。它包括以下三个重要的部分：
-
初始化 —— 循环初始化表达式是我们初始化计数器起始值的地方。初始化语句在循环开始之前执行。
-
条件 —— 条件表达式用来测试给定的条件是否为真。如果条件为真，则执行循环内的代码。否则，控制权将退出循环。
-
迭代 —— 迭代表达式是你增加或减少计数器的地方。
你可以把这三个部分放在一行中，中间用分号隔开。
for 循环流程图
for 循环的流程图如下所示：
语法
for 循环的语法如下：
for (初始化; 条件; 迭代) {
如果条件为真则执行的语句
}
以上三个语句都是可选的。
示例
尝试以下示例来了解 for 循环在 JavaScript 中是如何工作的。
示例：重复执行代码块
在下面的示例中，我们使用 for 循环来打印 count 变量更新后的值。在每次循环迭代中，我们将 count 的值递增 1 并打印出来。
<html>
<head>
<title>JavaScript - for 循环</title>
</head>
<body>
<p id="output"></p>
<script>
const output = document.getElementById("output");
output.innerHTML = "开始循环 <br>";
for (let count = 0; count < 10; count++) {
output.innerHTML += "当前计数 : " + count + "<br/>";
}
output.innerHTML += "循环停止！";
</script>
</body>
</html>
输出：
开始循环
当前计数 : 0
当前计数 : 1
当前计数 : 2
当前计数 : 3
当前计数 : 4
当前计数 : 5
当前计数 : 6
当前计数 : 7
当前计数 : 8
当前计数 : 9
循环停止！
示例：初始化是可选的
下面的代码演示了 for 循环中的第一个语句是可选的。你也可以在循环外部初始化变量并使用它。
无论何时你需要在循环完成后使用循环变量，都可以像下面代码中那样，在循环的父作用域内初始化一个变量。我们也在循环外打印了 p 的值。
<html>
<head>
<title>在 for 循环中初始化是可选的</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 += "循环外！<br>";
output.innerHTML += "P -> " + p + "<br/>";
</script>
</body>
</html>
输出：
P -> 0
P -> 1
P -> 2
P -> 3
P -> 4
循环外！
P -> 5
示例：条件语句是可选的
下面的代码演示了 for 循环中的条件语句是可选的。然而，如果你不写任何条件，它将进行无限次迭代。因此，你可以使用 break 关键字来停止循环的执行，就像我们在下面的代码中所做的那样。
<html>
<head>
<title>在 for 循环中条件语句是可选的</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>迭代语句是可选的</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