如何使用 for...of 循环遍历可迭代对象？

推荐答案

const iterable = [1, 2, 3, 4, 5];

for (const value of iterable) {
  console.log(value);
}

本题详细解读

1. for...of 循环的基本语法

for...of 循环是 ES6 引入的一种新的循环语法，用于遍历可迭代对象（如数组、字符串、Map、Set 等）。其基本语法如下：

for (const value of iterable) {
  // 循环体
}

• value：每次迭代时，value 会被赋值为可迭代对象的当前元素。
• iterable：一个可迭代对象，如数组、字符串、Map、Set 等。

2. 可迭代对象

可迭代对象是指实现了 [Symbol.iterator] 方法的对象。常见的可迭代对象包括：

• 数组：[1, 2, 3]
• 字符串："hello"
• Map：new Map([['key1', 'value1'], ['key2', 'value2']])
• Set：new Set([1, 2, 3])

3. for...of 与 for...in 的区别

• for...of 用于遍历可迭代对象的值。
• for...in 用于遍历对象的属性名（键）。

// www.javascriptcn.com code example
const arr = [1, 2, 3];

for (const value of arr) {
  console.log(value); // 输出：1, 2, 3
}

for (const index in arr) {
  console.log(index); // 输出：0, 1, 2
}

4. 自定义可迭代对象

你也可以通过实现 [Symbol.iterator] 方法来创建自定义的可迭代对象：

// www.javascriptcn.com code example
const myIterable = {
  [Symbol.iterator]: function* () {
    yield 1;
    yield 2;
    yield 3;
  }
};

for (const value of myIterable) {
  console.log(value); // 输出：1, 2, 3
}

5. 注意事项

• for...of 不能直接用于普通对象（除非对象实现了 [Symbol.iterator] 方法）。
• for...of 循环会自动调用可迭代对象的 [Symbol.iterator] 方法，并遍历其返回的迭代器。