面试题：JavaScript 中迭代器与生成器如何协同工作

JavaScript 迭代器基本概念

迭代器（Iterator）是一种设计模式，它提供了一种方法来顺序访问一个聚合对象中的各个元素，而又不暴露该对象的内部表示。在 JavaScript 中，迭代器是一个具有 next() 方法的对象。每次调用 next() 方法时，它会返回一个包含两个属性的对象：

value：当前迭代的值。
done：一个布尔值，表示迭代是否结束。当 done 为 true 时，value 通常为 undefined。

例如，原生的数组就可以通过迭代器来遍历：

const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

JavaScript 生成器基本概念

生成器（Generator）是一种特殊的函数，它可以暂停和恢复执行。生成器函数使用 function* 语法定义，函数内部可以使用 yield 关键字来暂停函数执行并返回一个值。生成器函数返回一个生成器对象，这个对象既是一个迭代器。

例如：

function* myGenerator() {
    yield 1;
    yield 2;
    yield 3;
}
const gen = myGenerator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

它们协同工作的方式

使用生成器函数创建可迭代对象：生成器函数返回的生成器对象本身就是可迭代的，因为它实现了迭代器接口（具有 next() 方法）。例如：

function* numberGenerator() {
    yield 1;
    yield 2;
    yield 3;
}
const numbers = numberGenerator();
for (const num of numbers) {
    console.log(num);
}
// 输出:
// 1
// 2
// 3

这里 numberGenerator() 返回的 numbers 是一个可迭代对象，for...of 循环会自动调用其迭代器的 next() 方法来消费生成器产生的值。

迭代器消费生成器产生的值：手动使用迭代器来消费生成器的值：

function* fruitGenerator() {
    yield 'apple';
    yield 'banana';
    yield 'cherry';
}
const fruitGen = fruitGenerator();
const fruitIterator = fruitGen[Symbol.iterator]();
console.log(fruitIterator.next()); // { value: 'apple', done: false }
console.log(fruitIterator.next()); // { value: 'banana', done: false }
console.log(fruitIterator.next()); // { value: 'cherry', done: false }
console.log(fruitIterator.next()); // { value: undefined, done: true }

这里通过获取生成器对象的迭代器，手动调用 next() 方法来依次获取生成器产生的值。在实际应用中，像 for...of、Array.from() 等语言结构和方法会自动处理迭代器和生成器之间的交互，使得代码更加简洁和易读。

星途面试题库

面试题：JavaScript 中迭代器与生成器如何协同工作

知识考点

面试题答案

JavaScript 迭代器基本概念

JavaScript 生成器基本概念

它们协同工作的方式