引言
ES6 中的 Generator 函数和 yield 关键字是一种非常有用的工具，可以使我们在 JavaScript 中使用一些更加复杂的流程控制和异步编程模式。本文将详细介绍 Generator 函数和 yield 关键字的使用方法和学习指南，并附加示例代码。
Generator 函数的定义和使用
Generator 函数是一种可以在多次执行之间暂停和恢复的函数，它可以通过 yield 关键字来产生一个值，并在下一次执行的时候从上次暂停的位置继续执行。我们可以使用下面的代码来定义一个简单的 Generator 函数：
function* myGenerator() {
yield 'Hello';
yield ' ';
yield 'world';
}通过上面的代码，我们可以看到 Generator 函数通过 function* 关键字来定义，而 yield 关键字可以产生一个值并让函数暂停，等待下一次执行时继续执行。我们可以使用下面的代码来调用这个 Generator 函数：
const gen = myGenerator();
console.log(gen.next()); // 输出：{ value: 'Hello', done: false }
console.log(gen.next()); // 输出：{ value: ' ', done: false }
console.log(gen.next()); // 输出：{ value: 'world', done: false }
console.log(gen.next()); // 输出：{ value: undefined, done: true }我们通过调用 myGenerator() 得到了一个迭代器对象 gen，然后可以通过调用 gen.next() 来依次遍历该 Generator 函数产生的值。注意，在最后一次调用时 done 属性的值为 true，表示该 Generator 函数已经产生完所有的值。
yield* 关键字的使用
如果我们希望在一个 Generator 函数中调用另外一个 Generator 函数，可以使用 yield* 关键字来实现。下面的代码展示了在一个 Generator 函数中调用另外一个 Generator 函数的例子。
-- -------------------- ---- -------
--------- -------------- -
----- --------
------ --------------
----- ----
-
--- ---- - -- --------------- -
--------------- -- -------- ----- -
-我们在 myGenerator2() 中调用了 myGenerator()，并通过 yield* 关键字来将 myGenerator() 的产生的值依次产生出来。通过上述代码，我们可以看到最终输出了 Hello world !。
异步编程中的 Generator 函数
Generator 函数在异步编程中也非常有用，它可以避免回调地狱（callback hell）同时提供更加灵活的流程控制。下面的代码展示了在使用 Promise 的情况下如何利用 Generator 函数来完成异步编程。
-- -------------------- ---- -------
--------- ----------- -
----- ---- - ----- -------------------
----- ----- - ----- ------------------- - ---------
------ ------
-
-------- -------------- -
----- -------- - ------------
-------- -------------------- -
-- ------------- ------ ------------------------------
------ --------------------- -- ----------------------------------
-
------ ------------------------------
-
------------------------- -- --------------------上面的代码中 fetchUser() 函数通过 yield 来产生异步操作产生的值，然后利用封装好的 run() 函数来执行这个 Generator 函数并返回最终的结果。与回调地狱相比，利用 Generator 函数异步编程代码更加清晰和易于维护。
总结
通过本文的介绍，我们可以清晰地了解到 Generator 函数和 yield 关键字在 JavaScript 中的应用和使用方法。在日常的前端开发工作中，我们可以充分利用这些工具来提高我们的编程效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f84591f6b2d6eab30659be