什么是生成器函数？
生成器函数是 ECMAScript 2015 引入的一种新的语言特性。它可以被看作是一个函数的特殊形式，允许开发者在函数内部通过 yield 关键字控制代码执行的流程。
从语法上看，生成器函数使用 function* 关键字定义，其中的 yield 关键字可以用于暂停函数执行，并返回一个函数结果。这个结果可以用来在下一次调用生成器函数时继续执行。例如：
-- -------------------- ---- ------- --------- -------------- ----------------- ---- ------ ----------------- ---- ------ ----------------- ---- - ----- --- - -------------- ----------- -- ---- - ----------- -- ---- - ----------- -- ---- -展开代码
在上述代码中，我们定义了一个生成器函数 myGenerator。在函数内部，我们使用 console.log 输出三个步骤的信息，并使用 yield 关键字控制代码的执行流程。最后，我们将 myGenerator 赋值给 gen 变量，并依次调用 gen 的 next() 方法。这个方法使得生成器函数逐步地执行。在调用 gen.next() 时，console.log('Step 1') 被执行，然后生成器函数被暂停，代码执行被挂起。直到下一次 gen.next() 调用，生成器函数才会从上次暂停的地方继续执行。
什么时候应该使用生成器函数？
生成器函数通常用于生成一些较为复杂的数据结构，例如树形结构、链表等。因为它可以遍历这些数据结构，并且在遍历到每个节点时执行一些逻辑。
另外，当需要执行一些长时间运行的操作时，生成器函数也可以作为一种异步编程模式的选择。使用生成器函数，我们可以将异步操作的代码逻辑写成线性的形式，避免回调地狱和异步操作的嵌套。
生成器函数的常见用法
生成器函数除了上述的使用场景外，还有一些常用的用法：
1. 生成器函数作为迭代器
生成器函数可以被用作迭代器，它能够遍历一个数据结构并返回其中的每个元素。以数组为例：
-- -------------------- ---- ------- --------- ------------------ --- ---- - - -- - - ----------- ----- ----- ------- - - ----- --- - --- -- -- --- ----- ---- - ------------------ ------------------------------- -- - ------------------------------- -- - ------------------------------- -- - ------------------------------- -- -展开代码
在这个例子中，我们定义了一个生成器函数 iterateArray，它接收一个数组作为参数，然后返回一个迭代器。在函数内部，我们使用 for 循环遍历数组，并使用 yield 关键字返回数组中每个元素。最后，我们将 iterateArray 返回的迭代器赋值给 iter 变量，并使用 next() 方法逐个访问数组中的元素。
2. 和 Promise 的结合使用
由于 ECMAScript 2016 引入了 async/await，所以我们现在使用生成器函数和 Promise 的场景越来越少。但是，有时候我们还是要使用这种方法来实现某些异步操作。例如：
-- -------------------- ---- ------- --------- ----------------- ----- ---- - ----- ------------------------------------------ -- ------------ ----- ------------------- - ----- --- - ----------------- ----- ------- - ----------------- ------------------- -- - ----------------- -------------- -- - -------------------- -- -- ----- ------------------- ---展开代码
在这个例子中，我们定义了一个生成器函数 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
