ES6 中的 Generator 是一个非常强大的函数类型，可以让我们以一种新的方式处理异步流程和数据集合。本篇文章将详细介绍 ES6 Generator 的运行机制，并提供一些具体的应用实例，帮助读者更好地理解和应用 Generator。
Generator 的基本概念
Generator 是 ES6 引入的一种新类型函数，可以通过 function* 定义。Generator 函数可以通过特定语法控制函数的执行逻辑，使得函数在执行时可以中途停止或多次执行，而且不必像回调函数或 Promise 那样嵌套层级过多。
在 Generator 中，除了通过 return 返回函数结果外，还可以通过 yield 暂停函数的执行，并将中间结果传递给调用方。Generator 函数中可以有多个 yield 语句，每次调用 Generator 函数时执行到 yield 就会暂停，直到再次调用 next() 方法时从上一次暂停处继续执行。
下面是一个简单的 Generator 函数实例：
-- -------------------- ---- ------- --------- ------------- - ----- -- ----- -- ----- -- - --- --- - -------------- ------------------------------ -- - ------------------------------ -- - ------------------------------ -- -
在上述代码中，myGenerator() 函数通过 yield 语句将结果暂停，并通过 next() 方法从上次暂停处继续执行，然后输出结果。
Generator 的运行机制
在上一章中，我们已经了解到 Generator 函数的基本概念和语法。接下来，我们将对 Generator 函数的运行机制进行详细介绍。
Generator 的执行
当我们调用一个 Generator 函数时，函数并不会马上执行，而是返回一个迭代器对象。迭代器对象包含了一个 next() 方法，这个方法用于执行函数，并返回一个包含函数执行结果的对象。迭代器对象也可以使用 for...of 循环来迭代函数的结果集。
下面是一个简单的迭代器实例：
-- -------------------- ---- ------- --------- ------------- - ----- -- ----- -- ----- -- - --- --- - -------------- ------- - -- ---- - --------------- - -- - -- - -- -
在上述代码中，我们使用 for...of 循环迭代函数的结果集，并输出每次执行的结果。
Generator 的运行状态
在 Generator 函数执行时，函数的状态会根据 next() 方法的调用发生变化，状态用一个对象来记录，包含以下两个属性：
value：表示当前执行的结果值；done：表示函数是否已经执行完毕。
当调用 next() 方法时，函数会执行到下一个 yield 关键字处，并将该关键字后面的表达式作为返回值。如果 Generator 函数中没有 yield 关键字，则函数执行到结束并返回默认值 undefined。
在调用 next() 方法时还可以传入一个参数，该参数会作为上一个执行的 yield 表达式的返回值。这个特性在实现的时候非常重要。
Generator 的应用实例
除了上述的基本概念和运行机制之外，Generator 还有很多实际的应用场景。下面则结合一些具体的示例，进一步介绍 Generator 的应用实例。
异步操作的简化
在前端开发中，我们经常需要对异步请求结果进行处理，比如获取数据、渲染页面等。通过 Generator 函数，我们可以将异步操作的处理函数部分写在一个函数内，然后通过 yield 关键字把代码块拆分开来：
-- -------------------- ---- -------
--------- ------------------ -
--- --- - ----- ------------
-----------------
--- - ----- ---------- - ----------
-----------------
--- - ----- ---------- - -----------------
-----------------
-
-------- ----------- -
-- -------------
--- --- - -------------------
-------- ----------------- -
-- ---------- -------
-----------------
--------------------- --
----------------------------
--
-
-------------------------
-
-----------------------------------在上述代码中，我们使用了 jQuery 的 $.ajax 函数来模拟异步请求，通过 yield 关键字拆分代码块，从而实现了异步请求的顺序处理。
Generator 与 Promise 的结合
ES6 中的 Generator 可以与 Promise 很好的结合。
我们可以在 Generator 函数中使用 yield 关键字暂停函数执行，并将 yield 关键字后面的 Promise 对象返回给调用者。调用者可以通过 .then() 方法等待 Promise 对象执行完毕，并通过 next() 方法恢复 Generator 函数的执行。
下面是一个简单的示例：
-- -------------------- ---- -------
--------- ------------- -
--- ------ - ----- --- ----------------- ------- -- -
------------- -- -
---------------- -----------
-- ------
---
-------------------- -- -------- ---------
-
--- --- - --------------
--- ------- - -----------------
--------------------- -- -
-----------------
---在上述代码中，我们通过 Promise 改进了 Generator 函数，通过 .then() 方法等待 Promise 执行完毕，并通过 next() 方法继续执行 Generator 函数。
总结
ES6 中的 Generator 是一个强大的函数类型，它改变了我们处理异步流程和数据集合的方式。通过本文的介绍，我们了解了 Generator 的基本概念和运行机制，也学习了一些常见的 Generator 应用实例。学习和掌握 Generator 对于我们的前端工作非常重要，希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6493ce1b48841e9894168a2c