什么是生成器函数？
生成器函数是 ECMAScript 2015 引入的一种新的语言特性。它可以被看作是一个函数的特殊形式，允许开发者在函数内部通过 yield 关键字控制代码执行的流程。
从语法上看，生成器函数使用 function* 关键字定义，其中的 yield 关键字可以用于暂停函数执行，并返回一个函数结果。这个结果可以用来在下一次调用生成器函数时继续执行。例如：
function* myGenerator(){
console.log('Step 1');
yield;
console.log('Step 2');
yield;
console.log('Step 3');
}
const gen = myGenerator();
gen.next(); // Step 1
gen.next(); // Step 2
gen.next(); // Step 3在上述代码中，我们定义了一个生成器函数 myGenerator。在函数内部，我们使用 console.log 输出三个步骤的信息，并使用 yield 关键字控制代码的执行流程。最后，我们将 myGenerator 赋值给 gen 变量，并依次调用 gen 的 next() 方法。这个方法使得生成器函数逐步地执行。在调用 gen.next() 时，console.log('Step 1') 被执行，然后生成器函数被暂停，代码执行被挂起。直到下一次 gen.next() 调用，生成器函数才会从上次暂停的地方继续执行。
什么时候应该使用生成器函数？
生成器函数通常用于生成一些较为复杂的数据结构，例如树形结构、链表等。因为它可以遍历这些数据结构，并且在遍历到每个节点时执行一些逻辑。
另外，当需要执行一些长时间运行的操作时，生成器函数也可以作为一种异步编程模式的选择。使用生成器函数，我们可以将异步操作的代码逻辑写成线性的形式，避免回调地狱和异步操作的嵌套。
生成器函数的常见用法
生成器函数除了上述的使用场景外，还有一些常用的用法：
1. 生成器函数作为迭代器
生成器函数可以被用作迭代器，它能够遍历一个数据结构并返回其中的每个元素。以数组为例：
function* iterateArray(arr){
for (let i = 0; i < arr.length; i++){
yield arr[i];
}
}
const arr = [1, 2, 3, 4];
const iter = iterateArray(arr);
console.log(iter.next().value); // 1
console.log(iter.next().value); // 2
console.log(iter.next().value); // 3
console.log(iter.next().value); // 4在这个例子中，我们定义了一个生成器函数 iterateArray，它接收一个数组作为参数，然后返回一个迭代器。在函数内部，我们使用 for 循环遍历数组，并使用 yield 关键字返回数组中每个元素。最后，我们将 iterateArray 返回的迭代器赋值给 iter 变量，并使用 next() 方法逐个访问数组中的元素。
2. 和 Promise 的结合使用
由于 ECMAScript 2016 引入了 async/await，所以我们现在使用生成器函数和 Promise 的场景越来越少。但是，有时候我们还是要使用这种方法来实现某些异步操作。例如：
function* asyncGenerator(){
const data = yield fetch('https://someapi.com/data').then(res => res.json());
yield data.toUpperCase();
}
const gen = asyncGenerator();
const promise = gen.next().value;
promise.then(result => {
gen.next(result);
}).then(result => {
console.log(result); // 返回 fetch 请求返回的数据，并将其中的文本全部大写
});在这个例子中，我们定义了一个生成器函数 asyncGenerator，它包含了一个异步操作——通过 fetch 请求获取服务器的数据，并将其格式化为 JSON。然后，我们使用 yield 将这个 promise 对象返回。在调用生成器函数时，我们将其赋值给 gen 变量，并通过 gen.next().value 获得这个 promise 对象。接着，我们将这个 promise 对象传入后续的链式调用中，并调用 gen.next(result) 将获取到的数据传递进去。当我们获得最终结果时，它将被大写。最后，我们可以使用 console.log 输出最终的结果。
总结
在这篇文章中，我们深入探讨了 ECMAScript 2016 引入的生成器函数，并介绍了它的基本语法和常见的用法。虽然现在我们已经有了更好的异步编程方法，比如 Promise 和 async/await，但是生成器函数仍然是一种很有用的工具，它可以让我们更灵活地处理一些复杂的数据结构，并提供了一种简单的方法来避免回调地狱。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659fe834add4f0e0ff860d69