17370845950

JavaScript中的迭代器与生成器_javascript ES6
迭代器是符合next()方法返回value和done的对象,生成器函数用function*定义并返回可迭代的生成器对象。

JavaScript中的迭代器和生成器是ES6引入的重要特性,它们让数据遍历和异步编程更加简洁高效。理解这两个概念有助于写出更清晰、更具可读性的代码。

什么是迭代器(Iterator)

迭代器是一种设计模式,在JavaScript中表现为一个对象,该对象符合迭代器协议:拥有一个next()方法,返回包含valuedone两个属性的对象。

donetrue时,表示遍历结束;value则是当前的值。

很多内置类型如数组、字符串、Map、Set都默认实现了Symbol.iterator方法,因此可以被for...of循环遍历。

手动创建一个迭代器的例子:

const myArray = [1, 2, 3];
const iterator = myArray[Symbol.iterator]();

iterator.next(); // { value: 1, done: false } iterator.next(); // { value: 2, done: false } iterator.next(); // { value: 3, done: false } iterator.next(); // { value: undefined, done: true }

什么是生成器(Generator)

生成器是一种特殊函数,使用function*定义,并通过yield关键字暂停执行。调用生成器函数不会立即运行其内部代码,而是返回一个生成器对象,这个对象既是迭代器,也是可迭代对象。

每次调用生成器对象的next()方法,函数会从上次暂停的地方继续执行,直到遇到下一个yield或函数结束。

示例:

function* count() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = count(); gen.next(); // { value: 1, done: false } gen.next(); // { value: 2, done: false } gen.next(); // { value: 3, done: false } gen.next(); // { value: undefined, done: true }

生成器的优势与应用场景

生成器让开发者可以用同步写法处理异步逻辑,虽然现在已被async/await取代,但它在某些场景仍有价值。

  • 惰性求值:只在需要时计算下一个值,适合处理大数据流或无限序列
  • 状态保持:函数执行状态在yield后保留,恢复时上下文不变
  • 简化异步流程控制:配合Promise可实现类似协程的效果

比如创建一个无限计数生成器:

function* infiniteCounter() {
  let i = 0;
  while (true) {
    yield i++;
  }
}

const counter = infiniteCounter(); counter.next().value; // 0 counter.next().value; // 1 counter.next().value; // 2

可迭代协议与for...of的工作原理

一个对象如果实现了Symbol.iterator方法,并且该方法返回一个迭代器,那么它就是“可迭代的”。

for...of循环本质上会自动调用对象的[Symbol.iterator]()方法,然后反复调用next(),直到donetrue

你可以为自定义对象添加迭代能力:

const myRange = {
  from: 1,
  to: 5,
  *[Symbol.iterator]() {
    for (let i = this.from; i <= this.to; i++) {
      yield i;
    }
  }
};

for (const num of myRange) { console.log(num); // 1, 2, 3, 4, 5 }

基本上就这些。迭代器和生成器扩展了JavaScript的表达能力,尤其在处理数据流、构建工具函数时非常实用。虽然日常开发中直接使用生成器不多,但理解它们有助于深入掌握语言机制。