在 JavaScript 中，生成器（Generator）是 ES6 新增的一个重要特性，它可以让我们更方便地编写异步代码，并且可以让我们避免回调地狱（Callback Hell）的问题。生成器的核心就是 yield 关键字，通过 yield 关键字可以将一个函数分成多个执行阶段，每个阶段之间可以暂停并保存执行状态，等待下一次调用继续执行。
生成器的基本语法
生成器的基本语法如下：
function* generator() {
yield 1;
yield 2;
yield 3;
}在上面的代码中，我们定义了一个名为 generator 的生成器函数，它包含三个 yield 关键字，分别返回 1、2 和 3。使用生成器函数可以创建一个生成器对象：
const gen = generator();
生成器对象有一个 next 方法，每次调用 next 方法都会执行生成器函数中的下一个 yield 语句，并返回一个包含 value 和 done 属性的对象。value 属性表示 yield 返回的值，done 属性表示生成器函数是否已经执行完毕。例如，我们可以通过下面的代码依次获取生成器函数中的三个值：
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 }在最后一次调用 next 方法时，生成器函数已经执行完毕，done 属性为 true，value 属性为 undefined。
生成器的应用场景
生成器的主要应用场景是异步编程，它可以让我们更方便地处理异步操作的返回结果。例如，我们可以通过生成器函数和 yield 关键字来实现一个异步操作的串行执行：
-- -------------------- ---- -------
--------- ---------------- -
----- ------- - ----- ---------------------------------------
----- ------- - ----- ---------------------------------------
----- ------- - ----- ---------------------------------------
-------------------- -------- ---------
-
-------- ------------------- -
----- --- - -----------------
-------- -------------------- -
-- ------------- -
-------
-
--------------------- -- -
----------------------------
---
-
-------------------------
-
--------------------在上面的代码中，我们定义了一个 asyncOperation 的生成器函数，它包含三个异步操作，每个异步操作都使用 fetch 函数获取数据。通过 yield 关键字，我们可以将异步操作分成多个执行阶段，并在每个阶段暂停执行，等待异步操作完成后再继续执行。在 runAsyncOperation 函数中，我们创建了一个生成器对象 gen，并通过递归调用 handleResult 函数来依次执行生成器函数中的每个阶段。在每个阶段中，我们通过 result.value.then 来等待异步操作完成，并将结果作为参数传递给 gen.next 函数。
生成器的高级应用
除了异步编程之外，生成器还可以用于实现迭代器（Iterator）。在 JavaScript 中，迭代器是一种用于遍历集合的接口，它可以让我们更方便地遍历数组、对象等数据结构。通过生成器函数和 yield 关键字，我们可以很容易地实现一个迭代器：
-- -------------------- ---- -------
--------- -------------------- -
--- ---- - - -- - - ------------------ ---- -
----- --------------
-
-
----- --- - --- -- ---
----- ---- - --------------
--- ------ ---- -- ----- -
------------------
-在上面的代码中，我们定义了一个 iterator 的生成器函数，它接受一个集合作为参数，通过 for 循环遍历集合中的每个元素，并使用 yield 关键字返回每个元素。通过 for...of 循环，我们可以依次遍历生成器函数中返回的每个元素。
总结
通过本文的介绍，我们了解了 ES6 的生成器和 yield 关键字的基本语法和使用方法，以及生成器在异步编程和迭代器实现中的应用场景。生成器的出现让 JavaScript 的异步编程更加方便和灵活，避免了回调地狱的问题，并且可以让我们更方便地处理异步操作的返回结果。同时，生成器还可以用于实现迭代器，让我们更方便地遍历数组、对象等数据结构。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6626945ac9431a720c30f06e