JS中的生成器函数是ES6引入的特殊函数类型，它执行后不会直接返回最终结果，而是返回一个迭代器对象，通过迭代器的next方法可以分步获取函数内部产出的数据，也可以在合适的时候暂停函数执行。
生成器函数的基础定义方式
定义生成器函数最核心的标识是在function关键字后面添加一个星号*，函数内部使用yield关键字来暂停函数执行并返回数据。
基础语法示例如下：
// 基础生成器函数定义
function* simpleGenerator() {
yield '第一个值';
yield '第二个值';
return '结束值';
}
// 创建生成器实例
const gen = simpleGenerator();
// 调用next方法获取结果
console.log(gen.next()); // { value: '第一个值', done: false }
console.log(gen.next()); // { value: '第二个值', done: false }
console.log(gen.next()); // { value: '结束值', done: true }
console.log(gen.next()); // { value: undefined, done: true }
从上面的代码可以看到，生成器函数调用后返回的是迭代器对象，每次调用next方法时，函数会执行到下一个yield位置暂停，返回的对象中value是产出的值，done表示是否执行完毕。
不同场景下的生成器函数定义
作为对象方法定义生成器函数
生成器函数也可以作为对象的方法存在，定义时同样需要添加星号：
const obj = {
*generatorMethod() {
yield '方法产出值1';
yield '方法产出值2';
}
};
const objGen = obj.generatorMethod();
console.log(objGen.next()); // { value: '方法产出值1', done: false }
console.log(objGen.next()); // { value: '方法产出值2', done: false }
console.log(objGen.next()); // { value: undefined, done: true }
作为类方法定义生成器函数
在ES6类中也可以定义生成器方法，用法和对象方法类似：
class NumberGenerator {
constructor(max) {
this.max = max;
}
*generateNumbers() {
let num = 1;
while (num <= this.max) {
yield num;
num++;
}
}
}
const numGen = new NumberGenerator(3);
const iterator = numGen.generateNumbers();
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 }
箭头函数无法定义生成器函数
需要注意，JS的箭头函数不支持定义生成器函数，以下写法会直接报错：
// 错误写法，会抛出语法错误
const wrongGenerator = *() => {
yield 1;
};
生成器函数的实用使用案例
案例1：实现惰性加载的数据序列
生成器函数非常适合实现惰性计算，只有需要数据的时候才会生成，避免一次性生成大量数据占用内存：
// 生成斐波那契数列的生成器函数
function* fibonacciGenerator() {
let a = 0, b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
const fibGen = fibonacciGenerator();
// 按需获取前5个斐波那契数
for (let i = 0; i < 5; i++) {
console.log(fibGen.next().value); // 依次输出 0, 1, 1, 2, 3
}
案例2：配合for...of循环遍历
生成器返回的迭代器对象本身是可迭代的，可以直接使用for...of循环遍历，不需要手动调用next方法：
function* rangeGenerator(start, end) {
let current = start;
while (current <= end) {
yield current;
current++;
}
}
// 直接遍历生成器产出的数据
for (const num of rangeGenerator(1, 5)) {
console.log(num); // 依次输出 1, 2, 3, 4, 5
}
案例3：处理异步流程控制
虽然现在更常用async/await处理异步，但生成器函数也可以配合执行器实现类似的异步流程控制效果：
// 模拟异步请求函数
function mockAsyncRequest(url) {
return new Promise(resolve => {
setTimeout(() => {
resolve(`请求${url}的结果`);
}, 1000);
});
}
// 生成器函数处理异步流程
function* asyncFlowGenerator() {
const res1 = yield mockAsyncRequest('https://ipipp.com/api1');
console.log(res1); // 1秒后输出 请求https://ipipp.com/api1的结果
const res2 = yield mockAsyncRequest('https://ipipp.com/api2');
console.log(res2); // 再1秒后输出 请求https://ipipp.com/api2的结果
}
// 简单生成器执行器
function runGenerator(gen) {
const iterator = gen();
function handle(result) {
if (result.done) return;
result.value.then(data => {
handle(iterator.next(data));
});
}
handle(iterator.next());
}
runGenerator(asyncFlowGenerator);
生成器函数的注意事项
yield关键字只能在生成器函数内部使用，在普通函数中写yield会直接报错。- 生成器函数执行后返回的迭代器，遍历完所有
yield和return之后，后续再调用next都会返回{ value: undefined, done: true }。 - 可以通过
iterator.throw方法向生成器内部抛出错误，也可以通过iterator.return方法提前终止生成器执行。