ES6 Generator函数的作用
ES6 引入了 Generator 函数（生成器函数），它是一种特殊的函数，可以通过 function* 关键字定义。Generator 函数的主要作用是生成一个迭代器，并且可以在执行过程中暂停和恢复，从而实现更灵活的控制流。
以下是 Generator 函数的主要作用和应用场景：
- 生成迭代器
Generator 函数返回一个迭代器对象，可以通过 next() 方法逐步执行函数体中的代码。每次调用 next()，函数会从上次暂停的地方继续执行，直到遇到下一个 yield 或函数结束。
示例：
function* myGenerator() {
yield 1;
yield 2;
yield 3;
}
const iterator = myGenerator();
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 }
- 暂停和恢复
Generator 函数的核心特性是可以在执行过程中暂停（通过 yield）和恢复（通过 next()）。这使得 Generator 函数非常适合处理需要分步执行的逻辑。
示例：分步执行
function* stepGenerator() {
console.log('Step 1');
yield;
console.log('Step 2');
yield;
console.log('Step 3');
}
const iterator = stepGenerator();
iterator.next(); // 输出: Step 1
iterator.next(); // 输出: Step 2
iterator.next(); // 输出: Step 3
- 惰性求值
Generator 函数可以实现惰性求值，即只在需要时才生成值。这对于处理大数据集或无限序列非常有用。
示例：生成无限序列
function* infiniteSequence() {
let i = 0;
while (true) {
yield i++;
}
}
const iterator = infiniteSequence();
console.log(iterator.next().value); // 0
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
// 可以无限调用 next()
- 与迭代器协议结合
Generator 函数返回的迭代器对象符合 Iterator 协议，因此可以直接用于 for...of 循环或其他支持迭代器的场景。
示例：用于 for...of 循环
function* myGenerator() {
yield 1;
yield 2;
yield 3;
}
for (let value of myGenerator()) {
console.log(value); // 1, 2, 3
}
- 双向通信
Generator 函数支持双向通信，即可以通过 yield 返回值，也可以通过 next(value) 向函数内部传递值。
示例：双向通信
function* twoWayGenerator() {
const name = yield 'What is your name?';
yield `Hello, ${name}!`;
}
const iterator = twoWayGenerator();
console.log(iterator.next().value); // What is your name?
console.log(iterator.next('Alice').value); // Hello, Alice!
- 错误处理
可以通过 iterator.throw() 方法向 Generator 函数内部抛出错误，并在函数内部通过 try...catch 捕获。
示例：错误处理
function* errorGenerator() {
try {
yield 1;
yield 2;
} catch (error) {
console.log('Error caught:', error);
}
}
const iterator = errorGenerator();
console.log(iterator.next().value); // 1
iterator.throw('Something went wrong'); // 输出: Error caught: Something went wrong
- 异步编程
Generator 函数可以用于简化异步编程，结合 yield 和 Promise，可以实现类似 async/await 的效果。
示例：异步编程
function* asyncGenerator() {
const result1 = yield fetchData1();
const result2 = yield fetchData2(result1);
return result2;
}
function runGenerator(generator) {
const iterator = generator();
function handle(iteratorResult) {
if (iteratorResult.done) {
return iteratorResult.value;
}
return Promise.resolve(iteratorResult.value).then(res => {
return handle(iterator.next(res));
});
}
return handle(iterator.next());
}
runGenerator(asyncGenerator)
.then(result => console.log(result))
.catch(error => console.error(error));
- 应用场景
- 生成迭代器：为自定义数据结构实现迭代器。
- 惰性求值：处理大数据集或无限序列。
- 异步编程：简化异步代码，实现类似
async/await的效果。 - 状态机：实现复杂的状态管理逻辑。
- 分步执行：将复杂任务分解为多个步骤。
示例：状态机
function* stateMachine() {
let state = 'start';
while (true) {
switch (state) {
case 'start':
console.log('Starting...');
state = yield 'started';
break;
case 'pause':
console.log('Pausing...');
state = yield 'paused';
break;
case 'stop':
console.log('Stopping...');
return 'stopped';
}
}
}
const iterator = stateMachine();
console.log(iterator.next().value); // Starting... started
console.log(iterator.next('pause').value); // Pausing... paused
console.log(iterator.next('stop').value); // Stopping... stopped
- 与
async/await的关系
async/await 是 ES2017 引入的语法糖，基于 Generator 函数和 Promise 实现。Generator 函数可以看作是 async/await 的前身。
对比：
- Generator 函数：需要手动控制迭代器的执行（如
next()）。 async/await：自动处理Promise的执行和错误捕获。
总结
Generator 函数是 ES6 引入的一种强大工具，它可以生成迭代器，并支持暂停和恢复执行。通过 yield 和 next()，Generator 函数可以实现惰性求值、双向通信、异步编程等功能。虽然 async/await 在异步编程中更为常用，但 Generator 函数仍然在某些场景下（如状态机、惰性求值）具有独特的优势。
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
