ES6 中的 Generator 函数是一种特殊的函数，它可以在执行过程中暂停并且可以在稍后的时间内恢复执行。这种函数是一种强大的工具，可以有效地处理异步编程中的回调地狱问题，并且可以让代码更加易于阅读和维护。
基本语法
Generator 函数可以通过 function* 关键字来定义，它可以包含多个 yield 语句，用于在函数执行过程中暂停函数的执行。下面是一个简单的示例代码：
// javascriptcn.com 代码示例
function* myGenerator() {
yield 1;
yield 2;
yield 3;
}
const generator = myGenerator();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }在上面的代码中，我们定义了一个名为 myGenerator 的 Generator 函数，它包含了三个 yield 语句。我们通过调用 myGenerator() 来创建一个 generator 对象，并且通过调用 next() 方法来逐个获取 yield 语句返回的值。
Generator 函数的执行过程
当我们调用 Generator 函数时，它并不会立即执行函数体内的代码，而是返回一个 generator 对象。该对象表示一个迭代器，可以通过调用 next() 方法来逐个获取 yield 语句返回的值。
当我们调用 next() 方法时，Generator 函数会执行到下一个 yield 语句，并将该语句返回的值作为 next() 方法的返回值。当函数内部没有更多的 yield 语句时，next() 方法将返回 { value: undefined, done: true }，表示该函数已经执行完毕。
当我们调用 next() 方法时，我们还可以向函数内部传递一个参数，该参数会作为上一个 yield 语句的返回值。例如：
// javascriptcn.com 代码示例
function* myGenerator() {
const x = yield 1;
const y = yield x + 2;
yield y + 3;
}
const generator = myGenerator();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next(2)); // { value: 4, done: false }
console.log(generator.next(4)); // { value: 7, done: false }
console.log(generator.next()); // { value: undefined, done: true }在上面的代码中，我们首先调用了 generator.next() 方法，它会执行到第一个 yield 语句，并返回该语句的返回值 1。接着我们调用了 generator.next(2) 方法，它会将参数 2 作为上一个 yield 语句的返回值，并执行到第二个 yield 语句，返回值为 x + 2，即 4。最后我们调用了 generator.next(4) 方法，它会将参数 4 作为上一个 yield 语句的返回值，并执行到最后一个 yield 语句，返回值为 y + 3，即 7。
Generator 函数的应用
处理异步编程
Generator 函数可以有效地处理异步编程中的回调地狱问题。我们可以使用 yield 语句来暂停函数的执行，等待异步操作完成后再继续执行。例如：
// javascriptcn.com 代码示例
function* myGenerator() {
const result1 = yield fetch('https://api.example.com/data/1');
const result2 = yield fetch('https://api.example.com/data/2');
const result3 = yield fetch('https://api.example.com/data/3');
console.log(result1, result2, result3);
}
const generator = myGenerator();
generator.next().value.then(result1 => {
return generator.next(result1).value;
}).then(result2 => {
return generator.next(result2).value;
}).then(result3 => {
generator.next(result3);
});在上面的代码中，我们通过调用 fetch() 方法来获取异步数据，并将其作为 yield 语句的返回值。我们可以通过调用 generator.next().value 来获取第一个 yield 语句的返回值，并在 then() 方法中将其作为参数传递给下一个 next() 方法。
实现迭代器
Generator 函数还可以用于实现迭代器。我们可以通过定义 next() 方法来控制迭代器的行为，并在函数内部使用 yield 语句来返回迭代器的下一个值。例如：
// javascriptcn.com 代码示例
function* myIterator() {
let i = 0;
while (true) {
yield i++;
}
}
const iterator = myIterator();
console.log(iterator.next().value); // 0
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2在上面的代码中，我们定义了一个名为 myIterator 的 Generator 函数，它会不断地返回递增的整数。我们通过调用 myIterator() 来创建一个 generator 对象，并且通过调用 next() 方法来逐个获取迭代器的值。
总结
Generator 函数是一种强大的工具，可以有效地处理异步编程中的回调地狱问题，并且可以让代码更加易于阅读和维护。通过理解和应用 Generator 函数，我们可以写出更加简洁、高效的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656af5e3d2f5e1655d37118a