JavaScript Array [Symbol.iterator]() 方法

Array 对象参考手册 JavaScript Array 对象

实例

获取数组的迭代器对象，并循环输出：

const fruits = ['apple', 'banana', 'orange']; // 1. 获取数组的迭代器对象 const iterator = fruits[Symbol.iterator](); // 2. 手动调用迭代器的 next() 方法 console.log(iterator.next()); // { value: 'apple', done: false } console.log(iterator.next()); // { value: 'banana', done: false } console.log(iterator.next()); // { value: 'orange', done: false } console.log(iterator.next()); // { value: undefined, done: true } // 3. 使用 for...of 循环（底层会自动调用 [Symbol.iterator]()） for (const fruit of fruits) { console.log(fruit); } // 输出: // apple // banana // orange // 4. 使用扩展运算符（也依赖于迭代器） const fruitCopy = [...fruits]; console.log(fruitCopy); // ['apple', 'banana', 'orange']

尝试一下 »

定义和用法

在 JavaScript 中，数组是最常用的数据结构之一。了解数组的迭代机制对于编写高效、优雅的代码至关重要。本文将深入讲解 Array [Symbol.iterator]() 方法，帮助你理解它是如何让数组变得可迭代的。

什么是迭代器（Iterator）？

在开始讲解 [Symbol.iterator]() 方法之前，我们需要先理解什么是迭代器。

迭代器是 JavaScript 中的一种协议，它定义了如何顺序访问一个集合中的元素。任何实现了迭代器协议的对象都可以被 for...of 循环、扩展运算符（...）等 JavaScript 特性使用。

一个迭代器对象必须实现一个 next() 方法，该方法返回一个包含两个属性的对象：

  • value：当前迭代的值
  • done：布尔值，表示迭代是否完成

Array Symbol.iterator 方法详解

[Symbol.iterator]() 是 JavaScript 数组的内置方法，它返回数组的默认迭代器。这个方法使得数组成为可迭代对象，可以被 for...of 循环等结构使用。

基本语法

实例

const iterator = array[Symbol.iterator]();

示例代码

让我们看一个简单的例子：

实例

const fruits = ['apple', 'banana', 'orange'];

// 获取数组的迭代器
const iterator = fruits[Symbol.iterator]();

console.log(iterator.next()); // { value: 'apple', done: false }
console.log(iterator.next()); // { value: 'banana', done: false }
console.log(iterator.next()); // { value: 'orange', done: false }
console.log(iterator.next()); // { value: undefined, done: true }

在这个例子中，我们：

  1. 创建了一个包含三种水果的数组
  2. 通过 [Symbol.iterator]() 方法获取了数组的迭代器
  3. 多次调用迭代器的 next() 方法，依次获取数组中的每个元素

实际应用场景

1. 使用 for...of 循环

for...of 循环内部会自动调用数组的 [Symbol.iterator]() 方法：

实例

const colors = ['red', 'green', 'blue'];

for (const color of colors) {
  console.log(color);
}
// 输出:
// red
// green
// blue

2. 使用扩展运算符

扩展运算符也依赖于迭代器协议：

实例

const numbers = [1, 2, 3];
const copiedNumbers = [...numbers];

console.log(copiedNumbers); // [1, 2, 3]

3. 解构赋值

数组解构同样使用了迭代器：

实例

const [first, second] = ['a', 'b', 'c'];
console.log(first); // 'a'
console.log(second); // 'b'

自定义数组迭代行为

虽然很少需要这样做，但你可以覆盖数组默认的 [Symbol.iterator]() 方法来自定义迭代行为：

实例

const customArray = [1, 2, 3];

customArray[Symbol.iterator] = function() {
  let index = this.length;
 
  return {
    next: () => {
      index--;
      return {
        value: this[index],
        done: index < 0
      };
    }
  };
};

for (const num of customArray) {
  console.log(num);
}
// 输出:
// 3
// 2
// 1

这个例子中，我们修改了迭代器，使数组从后向前迭代。

与其他迭代方法的比较

与 forEach() 的区别

  • forEach() 是一个数组方法，它会为每个元素执行回调函数
  • [Symbol.iterator]() 返回一个迭代器对象，可以更灵活地控制迭代过程

与 keys()/values()/entries() 的关系

这些方法都返回迭代器，但它们有不同的用途：

  • keys()：返回数组索引的迭代器
  • values()：返回数组元素的迭代器（与 [Symbol.iterator]() 相同）
  • entries()：返回索引/值对的迭代器

浏览器兼容性

Array [Symbol.iterator]() 方法在以下环境中得到支持：

  • Chrome 38+
  • Firefox 36+
  • Edge 12+
  • Safari 9+
  • Opera 25+
  • Node.js 0.12+

总结

Array [Symbol.iterator]() 方法是 JavaScript 数组实现可迭代协议的关键。理解这个方法的工作原理可以帮助你：

  1. 更深入地理解 JavaScript 的迭代机制
  2. 编写更高效的迭代代码
  3. 在需要时自定义迭代行为

记住，大多数情况下你不需要直接调用这个方法，因为 for...of 循环和其他语言特性会在内部自动处理它。但是了解它的工作原理会让你成为一个更好的 JavaScript 开发者。

Array 对象参考手册 JavaScript Array 对象