简介
Generator 函数是 ECMAScript 2015 引入的一种新的函数类型，它可以用来创建迭代器（Iterator）对象，从而实现对数据的遍历。在 ECMAScript 2016 中，Generator 函数得到了进一步的扩展，使得它可以更方便地实现异步操作。
本文将介绍 Generator 函数的基本概念和使用方法，并详细讲解其异步操作的实现方式，同时提供示例代码和学习指导，帮助读者更好地理解和应用这一重要的语言特性。
基本概念和使用方法
Generator 函数是一个特殊的函数，它使用 function* 关键字定义，可以通过 yield 关键字来暂停函数的执行，并返回一个包含当前执行状态的迭代器对象。当迭代器对象的 next() 方法被调用时，函数会从暂停的位置继续执行，直到遇到下一个 yield 关键字或函数结束。
以下是一个简单的示例：
// www.javascriptcn.com code example
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 }在上面的示例中，我们定义了一个 Generator 函数 myGenerator()，其中包含三个 yield 关键字，分别返回数字 1、2 和 3。我们通过调用 myGenerator() 函数来创建一个迭代器对象 gen，然后调用 gen.next() 方法来依次遍历迭代器对象中的每个值。
需要注意的是，当 myGenerator() 函数执行完成后，迭代器对象的 done 属性为 true，并且 value 属性为 undefined。这是因为在 Generator 函数中，没有显式的 return 语句时，函数默认返回 undefined。
除了使用 yield 关键字来暂停函数的执行，Generator 函数还可以使用 yield* 关键字来委托给另一个 Generator 函数。这种委托机制可以方便地实现嵌套的迭代器。
以下是一个示例：
// www.javascriptcn.com code example
function* myGenerator() {
yield* [1, 2, 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 }在上面的示例中，我们使用 yield* 关键字来委托给一个数组 [1, 2, 3]，从而实现了一个简单的迭代器。
异步操作的实现方式
在 ECMAScript 2016 中，Generator 函数得到了进一步的扩展，使得它可以更方便地实现异步操作。具体来说，我们可以使用 Generator 函数和 yield 关键字来实现异步操作的同步化写法，从而避免回调地狱和 Promise 链式调用带来的代码复杂性。
以下是一个示例：
// www.javascriptcn.com code example
function* myGenerator() {
const data1 = yield fetchData1();
const data2 = yield fetchData2(data1);
const data3 = yield fetchData3(data2);
return data3;
}
function fetchData1() {
return new Promise(resolve => {
setTimeout(() => {
resolve('data1');
}, 1000);
});
}
function fetchData2(data) {
return new Promise(resolve => {
setTimeout(() => {
resolve(`${data}-data2`);
}, 1000);
});
}
function fetchData3(data) {
return new Promise(resolve => {
setTimeout(() => {
resolve(`${data}-data3`);
}, 1000);
});
}
const gen = myGenerator();
function run(gen) {
const next = data => {
const { value, done } = gen.next(data);
if (done) {
return Promise.resolve(value);
}
return Promise.resolve(value).then(next);
};
return next();
}
run(gen).then(console.log); // data1-data2-data3在上面的示例中，我们定义了一个 Generator 函数 myGenerator()，其中包含三个异步操作 fetchData1()、fetchData2() 和 fetchData3()，它们都返回一个 Promise 对象。
我们通过调用 myGenerator() 函数来创建一个迭代器对象 gen，然后通过 run() 函数来执行迭代器对象，并将最终的结果输出到控制台。
在 run() 函数中，我们使用递归的方式来依次执行迭代器对象中的每个异步操作。具体来说，我们首先调用 gen.next() 方法来获取当前的值和状态，然后根据状态来判断是否继续执行下一个异步操作。
需要注意的是，每个异步操作返回的 Promise 对象都需要通过 Promise.resolve() 包装一下，以便在下一个异步操作中能够正确地接收到前一个异步操作的结果。
学习指导
Generator 函数是 ECMAScript 中一个非常重要的语言特性，它不仅可以用来创建迭代器对象，还可以用来实现异步操作的同步化写法。在学习 Generator 函数时，需要掌握以下几个方面：
- Generator 函数的基本语法和使用方法，包括
function*、yield和yield*关键字的含义和用法。 - Generator 函数的迭代器机制，包括迭代器对象的基本属性和方法，以及如何使用迭代器对象来遍历数据。
- Generator 函数的异步操作实现方式，包括如何使用 Generator 函数和
yield关键字来实现异步操作的同步化写法，以及如何使用 Promise 对象来处理异步操作的结果。
在学习过程中，可以通过多写示例代码来加深理解，同时可以参考相关的文档和教程来获取更多的知识和经验。此外，需要注意 Generator 函数在不同 JavaScript 运行环境中的兼容性问题，以便在实际开发中能够正确地使用和应用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d12492a941bf713426bc4e