【转】[JavaScript] for...of 语法

转自：kimi.com

for...of 是 JavaScript ES6 引入的一种循环语法，用于遍历可迭代对象（Iterable）的值。它与 for...in 不同，for...of 遍历的是对象的值，而不是属性名。它支持的可迭代对象包括数组、字符串、Map、Set、NodeList 等，以及任何实现了 Symbol.iterator 方法的对象。

基本语法

JavaScript复制

for (variable of iterable) {
    // 对每个值进行操作
}

示例

1. 遍历数组

JavaScript复制

const arr = [10, 20, 30, 40];
for (let value of arr) {
    console.log(value);
}

输出：

复制

10
20
30
40

2. 遍历字符串

字符串也可以被看作是一个字符数组，for...of 可以逐个字符地遍历字符串。

JavaScript复制

const str = "Hello";
for (let char of str) {
    console.log(char);
}

输出：

复制

H
e
l
l
o

3. 遍历 Map 和 Set

Map 和 Set 是 ES6 引入的两种新的数据结构，for...of 可以方便地遍历它们。

JavaScript复制

const myMap = new Map([
    ["key1", "value1"],
    ["key2", "value2"]
]);

for (let [key, value] of myMap) {
    console.log(key, value);
}

const mySet = new Set([1, 2, 3, 4]);
for (let value of mySet) {
    console.log(value);
}

输出：

复制

key1 value1
key2 value2
1
2
3
4

4. 遍历自定义的可迭代对象

任何实现了 Symbol.iterator 方法的对象都可以被 for...of 遍历。

JavaScript复制

const myIterable = {
    [Symbol.iterator]() {
        let count = 0;
        return {
            next() {
                count++;
                if (count <= 3) {
                    return { value: `Item ${count}`, done: false };
                } else {
                    return { done: true };
                }
            }
        };
    }
};

for (let value of myIterable) {
    console.log(value);
}

输出：

复制

Item 1
Item 2
Item 3

注意事项

1. 不适用于普通对象：for...of 不适用于普通对象（如 { key: value }），因为普通对象不是可迭代对象。如果需要遍历对象的值，可以使用 Object.values() 或 Object.entries()。
   JavaScript复制

   const obj = { a: 1, b: 2, c: 3 };
   for (let value of Object.values(obj)) {
       console.log(value);
   }

2. 与 for...in 的区别：
   • for...in 遍历的是对象的属性名（包括继承的可枚举属性）。
   • for...of 遍历的是对象的值，且只适用于可迭代对象。
3. 性能问题：for...of 在某些情况下可能比传统的 for 循环稍慢，因为它依赖于迭代器机制。但对于大多数现代 JavaScript 开发场景，性能差异可以忽略不计。

总结

for...of 是一种非常强大且简洁的循环语法，特别适用于遍历数组、字符串、Map、Set 等可迭代对象。它让代码更加简洁易读，是现代 JavaScript 开发中推荐使用的遍历方式之一。