目录
Generator(译为生成器) 是 ES6 新增的一种函数类型,它可以返回一个迭代器对象,通过遍历迭代器对象可以逐个取出 Generator 函数内部的值。之所以被称为『生成器』,是因为它可以按照一定的规则逐个生成值,每个值可以被看作是生成器的状态。
Generator 函数使用 function*
声明,其中通过 yield
关键字产生一个值,并挂起函数的执行,等待下一次遍历继续执行。在遍历完成或通过 return
关键字指定函数返回值后,迭代器对象会被标记为“完成”。
function* generator() {
yield 'one';
yield 'two';
return 'done';
}
const iterator = generator();
console.log(iterator); //generator {<suspended>}
console.log(iterator.next()); //{ value: 'one', done: false }
console.log(iterator.next()); //{ value: 'two', done: false }
console.log(iterator.next()); //{ value: 'done', done: true }
运行结果如下:
在上述代码中,我们定义了一个简单的 Generator 函数,并通过调用 next()
方法逐一遍历迭代器对象。当运行到 return
语句时,迭代器对象会被标记为“完成”,不再产生新的值。
Generator 与异步编程
Generator 函数是异步编程的重要工具之一,因为它具有同步和异步编程的双重特性,可以通过 yield
关键字挂起执行,并在需要时恢复执行。这使得我们能够编写更加直观、简洁、易于维护的异步代码,避免回调地狱和代码混乱。
以使用 Generator 函数编写的异步请求为例:
function* fetchData() {
try {
const response = yield fetch('https://example.com/data');
const data = yield response.json();
console.log(data);
} catch (error) {
console.log(error);
}
}
const iterator = fetchData();
const promise = iterator.next().value;
promise.then(response => {
return iterator.next(response).value;
}).then(data => {
iterator.next(data);
}).catch(error => {
iterator.throw(error);
});
在上述代码中,我们定义了一个使用 Generator 函数实现的异步请求函数,通过 yield
关键字挂起执行,并在 Promise 对象的 then
方法中恢复执行。由于 Generator 函数的特殊性质,我们可以在函数内部通过 try-catch
语句捕获错误,提高代码的健壮性。
值得注意的是,Generator 函数不能直接使用 await
关键字,需要结合 Promise 对象进行使用。因此,在实际开发中,我们经常会使用第三方库如 co 和 bluebird 等来简化异步操作。
Generator 高级应用
Generator 函数在某些场景下还有其他高级应用,例如:
1. 控制 Iterator 流程
在某些情况下,我们希望通过 Generator 函数控制迭代流程,例如,通过 for-of
循环或扩展运算符自定义迭代逻辑。(注:iterator译为迭代器)
function* customIterator() {
yield 1;
yield 2;
yield* [3, 4];
yield* '567';
}
for (const item of customIterator()) {
console.log(item); //1 2 3 4 5 6 7
}
运行结果:
在上述代码中,我们定义了一个自定义的迭代器,它通过 yield*
关键字将 Array 和 String 对象作为子迭代器,从而生成更加复杂的序列。
2. 实现状态机
Generator 函数可以看作是一个非常强大的状态机,通过 yield
关键字保存当前状态,并在下一次遍历时恢复执行。这使得我们能够非常容易地实现状态机,并处理复杂的状态转移逻辑。
以实现一个简单的有限状态自动机(Finite State Machine)为例:
function* stateMachine() {
let state = 'start';
while (true) {
switch (state) {
case 'start':
console.log('start');
state = 'mid';
break;
case 'mid':
console.log('mid');
state = 'end';
break;
case 'end':
console.log('end');
return;
}
}
}
for (const item of stateMachine()) {
console.log(item);
}
运行结果:
在上述代码中,我们定义了一个实现状态机的 Generator 函数,并在内部通过 switch
语句进行状态转移。当状态为“end”时,迭代器对象会被标记为“完成”,退出循环。
总结
Generator 函数是 ES6 新增的一种函数类型,它能返回一个迭代器对象,通过遍历迭代器对象可以逐个取出 Generator 函数内部的值。Generator 函数具有同步和异步编程的双重特性,避免回调地狱和代码混乱。在某些场景下,Generator 函数还可以用于控制 Iterator 流程、实现状态机等高级应用。
🚩 参考资料
—— JS | Promise对象的使用详解 | JS | ES6新增对象 - Promise使用方法详解 ——
—— JS | ES中的异步方法 async /await 详解
—— 整合总结ES6中常用的新特性:promise对象 ——
ES6基础——Generator函数详解-CSDN博客 | Generator函数-CSDN博客
Generator(生成器)函数 | Generator函数 | Generator函数 - 简书 | Generator函数的理解和使用