在 ECMAScript 2016 标准中，新引入了 Generator 函数，它是一种特殊的函数，能够通过迭代器协议（Iterator Protocol）控制函数的执行过程并暂停和继续执行函数。
Generator 函数的语法
Generator 函数的定义方式和普通函数类似，关键字 function 后面加上一个星号 *，同时函数内部使用 yield 关键字返回多个值。下面是一个简单的 Generator 函数示例：
function* myGeneratorFunction() {
yield 'hello';
yield 'world';
}
const iterator = myGeneratorFunction();
console.log(iterator.next().value); // 输出 'hello'
console.log(iterator.next().value); // 输出 'world'上面代码中，我们定义了一个名为 myGeneratorFunction 的 Generator 函数，该函数定义了两个 yield 关键字，在第一次调用 next() 方法时会返回第一个 yield 的结果 hello，第二次调用时返回第二个 yield 的结果 world。
Generator 函数的执行过程
当我们第一次调用 Generator 函数时，它并不会执行函数内部的代码，而是返回一个迭代器对象。当我们调用迭代器对象的 next() 方法时，函数内部的代码才会开始执行，并运行到第一个 yield 关键字处暂停，将 yield 后面的表达式作为结果返回。
再次调用 next() 方法时，函数会从上次暂停的地方继续执行，并运行到下一个 yield 关键字处暂停，将 yield 后面的表达式作为结果返回。当 Generator 函数的所有代码都执行完成时，调用 next() 方法不再返回任何值。
Generator 函数的应用场景
迭代器
Generator 函数可以被用来创建自定义的迭代器，可以方便地通过 yield 关键字返回对象的下一个值。下面是一个使用 Generator 函数实现迭代器的例子：
-- -------------------- ---- -------
----- -------- - -
----- --------
---- ---
------- --------
--
--------- ------------------ -
----- ---- - -----------------
--- ---- - - -- - - ------------ ---- -
----- -------------
-
-
----- -------- - ------------------------
----------------------------------- -- -- -------
----------------------------------- -- -- --
----------------------------------- -- -- --------上面代码中，我们定义了一个 iterateObject 的 Generator 函数，该函数可以将一个对象转换成迭代器，通过 yield 返回对象的属性值。调用迭代器的 next() 方法就可以依次返回对象的每个属性值。
异步编程
Generator 函数也可以用于异步编程，可以配合 yield 关键字和 Promise 对象来实现流程控制。下面是一个使用 Generator 实现异步编程的例子：
-- -------------------- ---- -------
-------- -------------- -
------ --- ----------------- ------- -- -
--------------------- ---- ---- ---------
------------- -- -
------------- ---- ---------
-- ------
---
-
--------- ----- -
----- ----- - ----- --------------------------------------
----- ----- - ----- --------------------------------------
------------------- -----------
------------------- -----------
-
-------- ------------------ -
----- -------- - ------------
-------- -------------------- -
-- ------------- -
-------
-
------------------------ -- -
----------------------------------
---
-
------------------------------
-
-------------上面代码中，我们定义了两个异步函数 fetchData() 和 run()。run() 函数使用 yield 关键字让代码执行顺序按照指定的顺序执行，每个异步函数的执行结果会通过迭代器协议交回到 execute() 函数中处理。
最后，调用 execute() 函数来执行 run() 函数，控制异步流程的执行。
总结
Generator 函数是一种很有用的语言特性，可以大大简化一些常规迭代和异步编程任务的开发难度。如果你是一个前端工程师，建议花些时间了解并掌握它，它会让你的代码更加简洁、易读和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f1f92ff6b2d6eab3bc2be8