深度剖析 JavaScript 中 Iterable、Iterator 和 Generator 的异同

2023-10-20 15:59:12

可迭代（Iterable）、迭代器（Iterator）和生成器（Generator）：JavaScript 中处理集合和序列的概念

在 JavaScript 中，可迭代、迭代器和生成器是三个密切相关的概念，用于处理集合和序列。虽然它们之间有一些相似之处，但也有着关键的区别。

可迭代（Iterable）

可迭代对象是一个拥有 [Symbol.iterator] 属性的对象，这个属性返回一个迭代器对象。迭代器对象包含一个 next() 方法，返回一个包含 value 和 done 属性的对象。value 属性包含当前元素的值，done 属性是一个布尔值，表示迭代是否已完成。

代码示例：

const iterable = ['a', 'b', 'c'];

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

console.log(iterator.next()); // { value: 'a', done: false }
console.log(iterator.next()); // { value: 'b', done: false }
console.log(iterator.next()); // { value: 'c', done: false }
console.log(iterator.next()); // { value: undefined, done: true }

迭代器（Iterator）

迭代器是一个包含 next() 方法的对象，返回一个包含 value 和 done 属性的对象。value 属性包含当前元素的值，done 属性是一个布尔值，表示迭代是否已完成。

代码示例：

const iterator = {
  [Symbol.iterator]: function() {
    return {
      next: function() {
        if (this.index < this.arr.length) {
          return { value: this.arr[this.index++], done: false };
        } else {
          return { value: undefined, done: true };
        }
      },
      arr: ['a', 'b', 'c'],
      index: 0,
    };
  },
};

console.log(iterator.next()); // { value: 'a', done: false }
console.log(iterator.next()); // { value: 'b', done: false }
console.log(iterator.next()); // { value: 'c', done: false }
console.log(iterator.next()); // { value: undefined, done: true }

生成器（Generator）

生成器是一种特殊的函数，使用 yield 来生成一个迭代器对象。当调用生成器函数时，它返回一个迭代器对象，该对象可以被使用 for...of 循环或其他迭代结构进行迭代。

代码示例：

function* generator() {
  yield 'a';
  yield 'b';
  yield 'c';
}

const iterator = generator();

console.log(iterator.next()); // { value: 'a', done: false }
console.log(iterator.next()); // { value: 'b', done: false }
console.log(iterator.next()); // { value: 'c', done: false }
console.log(iterator.next()); // { value: undefined, done: true }

联系和差异

可迭代和迭代器： 可迭代对象可以通过 [Symbol.iterator] 属性创建迭代器，而迭代器本身不是可迭代的。可迭代对象可以用作 for...of 循环的左操作数，而迭代器不能。
生成器和迭代器： 生成器函数返回一个迭代器对象，而迭代器使用 next() 方法生成值。生成器函数可以使用 yield 关键字来暂停和恢复迭代，而迭代器不能。
联系： 可迭代对象可以创建迭代器，迭代器可以遍历可迭代对象。生成器函数可以创建迭代器，迭代器可以遍历生成器函数。

何时使用