JavaScript 的生成器函数（Generator Function）是一种特殊的函数，它可以暂停执行和恢复执行，并可以产出（yield）多个值（而普通函数只能返回单个值）。
基本概念
1. 创建生成器函数
function* generatorFunction() {yield '第一个值';yield '第二个值';yield '第三个值';
}
注意：使用 function* 声明（星号可以放在 function 后面或函数名前）
2. 基本使用
function* simpleGenerator() {yield 1;yield 2;yield 3;
}const gen = simpleGenerator();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 }
主要特性
1. 暂停和恢复执行
function* counter() {console.log('开始');yield '暂停点1';console.log('继续执行');yield '暂停点2';return '结束';
}const gen = counter();
console.log(gen.next()); // 开始 → { value: '暂停点1', done: false }
console.log(gen.next()); // 继续执行 → { value: '暂停点2', done: false }
console.log(gen.next()); // { value: '结束', done: true }
2. 双向通信
可以向生成器传递值：
function* twoWayCommunication() {const name = yield '你的名字是什么？';const age = yield `你好 ${name}，你多大了？`;return `${name} 今年 ${age} 岁`;
}const gen = twoWayCommunication();
console.log(gen.next()); // { value: '你的名字是什么？', done: false }
console.log(gen.next('小明')); // { value: '你好 小明，你多大了？', done: false }
console.log(gen.next(25)); // { value: '小明 今年 25 岁', done: true }
3. 无限序列生成
function* infiniteNumbers() {let n = 0;while (true) {yield n++;}
}const numbers = infiniteNumbers();
console.log(numbers.next().value); // 0
console.log(numbers.next().value); // 1
console.log(numbers.next().value); // 2
// 可以无限调用...
实用场景
1. 惰性计算
function* take(n, generator) {for (let i = 0; i < n; i++) {yield generator.next().value;}
}function* fibonacci() {let [prev, curr] = [0, 1];while (true) {yield curr;[prev, curr] = [curr, prev + curr];}
}// 只获取前10个斐波那契数
const firstTen = [...take(10, fibonacci())];
console.log(firstTen); // [1, 1, 2, 3, 5, 8, 13, 21, 34, 55]
2. 异步操作控制（async/await 出现前）
function asyncTask(time) {return new Promise(resolve => setTimeout(() => resolve(`完成 ${time}ms`), time));
}function* asyncGenerator() {const result1 = yield asyncTask(1000);console.log(result1);const result2 = yield asyncTask(500);console.log(result2);
}// 手动执行生成器
function run(generator) {const gen = generator();function handle(result) {if (result.done) return Promise.resolve(result.value);return Promise.resolve(result.value).then(data => handle(gen.next(data))).catch(err => gen.throw(err));}return handle(gen.next());
}run(asyncGenerator);
3. 状态机实现
function* stateMachine() {let state = '开始';while (true) {const action = yield state;if (action === '下一步' && state === '开始') {state = '进行中';} else if (action === '下一步' && state === '进行中') {state = '完成';} else if (action === '重置') {state = '开始';}}
}const machine = stateMachine();
console.log(machine.next().value); // '开始'
console.log(machine.next('下一步').value); // '进行中'
console.log(machine.next('下一步').value); // '完成'
console.log(machine.next('重置').value); // '开始'
4. 可迭代对象
生成器函数返回的是可迭代对象：
function* range(start, end) {for (let i = start; i <= end; i++) {yield i;}
}// 可以直接用于 for...of
for (let num of range(1, 5)) {console.log(num); // 1, 2, 3, 4, 5
}// 或者使用扩展运算符
const numbers = [...range(1, 3)];
console.log(numbers); // [1, 2, 3]
方法总结
生成器对象的方法：
function* sample() {yield 1;yield 2;yield 3;
}const gen = sample();// 1. next() - 获取下一个值
gen.next();// 2. return() - 结束生成器
gen.return('提前结束');// 3. throw() - 向生成器抛出错误
gen.throw(new Error('出错了'));
注意事项
- 箭头函数不能作为生成器（箭头函数没有
function关键字） - 生成器函数调用时不立即执行，而是返回一个生成器对象
- 生成器对象既是迭代器也是可迭代对象
- 在类中也可以使用生成器方法：
class MyClass {*generatorMethod() {yield 'hello';} }
生成器函数提供了强大的控制流管理能力，虽然在现代 JavaScript 中很多场景已被 async/await 替代，但在处理复杂的状态机、惰性计算、数据流处理等方面仍然非常有用。