JavaScript 循环语句有哪些

JavaScript 的循环语句主要包括：for 循环、while 循环、do-while 循环、for-in 循环、以及 ES6 引入的 for-of 循环。这些循环语句主要用于在满足特定条件下重复执行代码块，它们各自适用于不同的应用场景。

在详细描述中，我们将重点介绍 for-of 循环。for-of 循环 是 ES6 新增的迭代语法，专门用于遍历可迭代的对象，如数组、Map、Set等。它的特点是能够直接获取到集合内的元素值，而不是索引，从而简化了迭代操作，并且for-of循环可以与新的迭代协议(Iterator Protocol)配合使用，使得自定义对象也能被迭代。

一、FOR 循环

for 循环可能是最常见的循环语句。它由三部分构成：初始化表达式、条件表达式、以及更新表达式。它的基本语法格式如下：

for (初始化表达式; 条件表达式; 更新表达式) {
    // 循环体代码
}

它的工作流程是：

执行初始化表达式，通常用于设置计数器。
检查条件表达式，如果条件为真，则执行循环体代码。
执行更新表达式，通常用于更新计数器。
重复步骤2和3，直到条件表达式为假。

通过 for 循环，我们可以有效地处理需要固定次数迭代的场景，例如遍历数组元素：

let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

for 循环也支持嵌套使用，这在处理多维数组或其他需要多层迭代的场景中非常有用。

二、WHILE 循环

while 循环是一个在给定条件为真时重复执行代码块的结构。它的语法很简单：

while (条件表达式) {
    // 循环体代码
}

while 循环首先评估条件表达式，如果为真，则执行代码块。执行完毕后，再次检查条件表达式，如此循环直到条件变为假。while 循环适用于不确定需要执行多少次循环体的场景。例如：

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

这段代码将打印出从0到4的数字。务必确保循环体内部有改变条件表达式结果的逻辑，否则会导致无限循环。

三、DO-WHILE 循环

do-while 循环与 while 循环类似，区别在于它至少执行一次循环体，然后再检查条件。其语法为：

do {
    // 循环体代码
} while (条件表达式);

这种结构确保了无论条件表达式初始值如何，循环体至少执行一次。例如：

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

即使 i 初始值为 5，循环体内的代码（在这里是 console.log(i);）仍会执行一次。

四、FOR-IN 循环

for-in 循环是一种特殊的循环，用于枚举对象的属性。其基本语法如下：

for (let key in object) {
    // 使用 key 访问对象的属性 object[key]
}

for-in 循环遍历对象中的每个可枚举属性，包括继承的可枚举属性。这种循环特别适合处理对象属性的场景，但不应用于数组的迭代，因为它无序且可能遍历到非元素属性。

举例来说，下面的代码将遍历对象 obj 中的所有属性：

let obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
    console.log(`obj.${key} = ${obj[key]}`);
}

五、FOR-OF 循环

for-of 循环 是 ES6 新加入的迭代语言构造，用于遍历可迭代对象的元素，如数组、字符串、Map、Set等。其语法结构为：

for (let item of iterable) {
    // 使用 item 操作集合中的单个元素
}

它的优势在于能够直接获取到集合的值而不是索引，简化了数组和其他类数组数据结构的遍历。for-of 循环对于数组或字符串的遍历尤其方便，而且可读性强：

let arr = [1, 2, 3, 4, 5];
for (let value of arr) {
    console.log(value);
}

上述代码将打印数组中的每个数字。for-of 循环不能用于遍历普通对象的属性，因为它们不是迭代协议的一部分。不过，有方法可以将对象的属性转换为可迭代集合，例如使用 Object.keys 或 Object.entries。

在处理具有自定义迭代行为的对象时，for-of 循环非常有用。通过实现 Symbol.iterator 属性并返回一个迭代器对象，可以让任何对象成为可迭代的。例如：

let customIterable = {
    from: 1,
    to: 5,
    [Symbol.iterator]() {
        return {
            current: this.from,
            last: this.to,
            next() {
                if (this.current <= this.last) {
                    return { done: false, value: this.current++ };
                } else {
                    return { done: true };
                }
            }
        };
    }
};
for (let num of customIterable) {
    console.log(num); // 将打印从1到5的数字
}