一篇搞定JavaScript循环

for ( 初始化表达式; 条件表达式; 递增表达式 ) {
    循环体语句
}

1.1 初始化表达式

初始化表达式会在循环开始之前执行一次。这里可以初始化一个或多个变量，以便在循环过程中使用它们。

1.2 条件表达式

条件表达式会在每次循环迭代开始之前被执行。如果这个表达式的值为 true，那么循环体语句就会执行。如果它的值为 false，那么循环就会结束。

1.3 递增（或递减）表达式

递增表达式会在循环的每次迭代之后执行。它可以用来改变循环变量的值。

1.4 示例代码

下面是一个计算1到10之和的示例代码：

let sum = 0;
for (let i = 1; i <= 10; i++) {
    sum += i;
}
console.log(sum); // 输出结果为：55

2. while 循环

while循环在条件为真的情况下一直重复执行它的代码块。它比for循环更为灵活，因为它不需要提前知道迭代次数。while循环的语法形式为：

while ( 条件表达式 ) {
    循环体语句
}

2.1 示例代码

下面是一个给定数字n，计算1到n之和的while循环示例代码：

let n = 10;
let sum = 0;
let i = 1;
while (i <= n) {
    sum += i;
    i++;
}
console.log(sum); // 输出结果为：55

3. do...while 循环

do...while循环与while循环类似，不同的是它的代码块会在条件判断语句之后执行。

do {
    循环体语句
} while (条件表达式);

当条件表达式为 true 时，循环会继续执行。但是，即使条件表达式为 false，循环体语句也会被执行一次。

3.1 示例代码

下面是一个do...while循环示例代码：

let i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);

输出结果为：

0
1
2
3
4

4. forEach 循环

forEach循环是ES5中引入的一种遍历数组的方法。它可以帮助我们遍历数组中的每一个元素，并对每个元素执行相同的操作。forEach循环的语法形式为：

array.forEach(function(currentValue, index, arr), thisValue)

参数中的currentValue是当前遍历到的数组元素，index是当前遍历到的数组元素的下标（从0开始），arr是数组本身，thisValue是可选的，它的值将被传递给函数，并用作this关键字的值。

4.1 示例代码

下面是一个使用forEach循环计算1到10之和的代码示例：

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let sum = 0;
arr.forEach(function(number) {
    sum += number;
});
console.log(sum); // 输出结果为：55

总结

通过本文的介绍, 我们学习了4种循环结构，分别是：for循环、while循环、do...while循环和forEach循环。对于for循环和while循环，我们需要手动管理循环次数，但同时也给了我们更好的控制，而do...while循环通常用于我们需要确保至少执行一次循环体语句的情况下，对代码块中的代码重复运行。forEach循环则是遍历数组中的每一个元素，并对每个元素执行相同的操作。