异步编程简介
异步编程在 JavaScript 中一直是非常重要的一部分，它使得我们可以在不阻塞主线程的情况下处理一些长时间运行的操作，例如：请求远程服务器、读取本地文件等等，这些操作可能会花费大量的时间，如果阻塞在主线程上进行，就会导致页面卡顿，用户体验非常不好。
在 JavaScript 语言中，异步编程的实现有很多种方式，目前最流行的三种方式是：回调函数、Promise 和 async/await。
- 回调函数：通过将代码封装在回调函数中，等待异步操作完成后再执行。
- Promise：通过 Promise 对象进行异步操作，调用 then 方法获取操作结果，或者 catch 方法获取错误信息。
- async/await：通过 async/await 关键字进行异步操作，await 等待异步操作完成后执行其后面的代码。
虽然上述三种方法都可以实现异步编程，但是在一些复杂的场景下，它们仍然存在一些不足。这时，我们就需要更加高效，更加灵活的方式来实现异步操作了。
Generator 函数的介绍
Generator 函数是 ES6 引入的一种新的函数类型，它的特点在于可以产生多个值，也就是说，它可以在一个函数内部暂停执行，等待外界将数据传进来后再继续执行。当 Generator 函数运行结束时，它的返回值是一个遍历器对象，可以通过遍历器对象获取该函数产生的值。
简单来说，Generator 函数是一个状态机，它的状态可以是暂停状态（yield）和运行状态（next）。
Generator 函数的定义方式是在 function 关键字后面加上一个 * 号（即 function*），函数体内部使用 yield 关键字表示暂停状态。
Generator 函数的语法
下面是一个简单的 Generator 函数的例子，它使用 yield 关键字暂停函数的执行：
function* helloGenerator() {
yield 'hello';
yield 'generator';
return 'finished';
}这个函数定义了一个名为 helloGenerator 的 Generator 函数，它可以产生三个值：'hello'、'generator' 和 'finished'。
在上面的函数中，yield 关键字是函数执行中断的标记，每次调用 next 方法时，执行到 yield 关键字时函数将会暂停，并返回一个包含当前 yield 值的遍历器对象，如下所示：
const genObj = helloGenerator();
console.log(genObj.next()); // { value: 'hello', done: false }
console.log(genObj.next()); // { value: 'generator', done: false }
console.log(genObj.next()); // { value: 'finished', done: true }
console.log(genObj.next()); // { value: undefined, done: true }执行 genObj.next() 方法时，Generator 函数将从上次离开的地方继续执行，遇到下一个 yield 关键字时再次暂停，并返回一个包含当前 yield 值的遍历器对象。当 Generator 函数运行结束时，它将返回一个包含最后一个 yield 值的遍历器对象，并将 done 属性设为 true。
可以看到，Generator 函数通过 yield 关键字实现了函数执行的中断和恢复，这使得它成为了一种非常适合异步编程的工具。
Generator 函数的应用
控制流管理
在 JavaScript 语言中，如果要实现一个异步任务流程控制的功能，通常需要采用回调函数、Promise 或 async/await。然而，在有些情况下，由于异步操作之间存在联系，必须采用特定的执行顺序才能保证程序的正确性。比如，我们需要按照某种规定的顺序依次执行异步操作，如果其中某个操作失败了，后续的操作就不能继续执行。
这时可以使用 Generator 函数来达到我们的目的，因为 Generator 函数可以实现函数执行的暂停和恢复。下面给出一个简单的示例：
-- -------------------- ---- -------
--------- ------------------ -
--- -
-- -------
----- ------- - ----- --- ----------------- -- -
------------- -- -
------------------ ---- - -----------
-----------
-- ------
---
-- -------
----- ------- - ----- --- ----------------- -- -
------------- -- -
------------------ ---- - -----------
--------------- - ---
-- ------
---
-- -------
----- ------- - ----- --- ----------------- -- -
------------- -- -
------------------ ---- - -----------
--------------- - ---
-- ------
---
---------------- ----- -------- ---- --------- ---------
- ----- ------- -
-------------------- ----------- -------
-
-
----- ----------- - -------------------
-------------------
-- ------
-- ----- ---- - --------
-- ----- ---- - --------
-- ----- ---- - --------
-- --- ----- -------- ---- ------- -在上面的代码中，我们定义了一个名为 asyncTaskManager 的 Generator 函数，它内部包含三个异步操作，每个异步操作都使用了 Promise 对象进行实现，并通过 yield 关键字实现了函数的暂停和恢复。
我们可以通过控制调用 next 方法的顺序，控制异步操作的执行顺序。在逐个执行完三个异步操作之后，我们就可以得到最终的结果。
数据遍历器
我们知道，在 JavaScript 中，数组和对象都是一种比较常见的数据结构，我们通常会使用 for..in 和 for..of 循环语句进行遍历。在 ES6 中，生成器函数也为遍历数据结构提供了一个新的方法。
生成器函数可以在遍历数据结构的过程中不断产生值，这使得数据结构的遍历变得更加自由灵活。下面给出一个示例：
-- -------------------- ---- ------- --------- --------------------- - ----- -------- ----- --------- ----- --------- - --- ---- ----- -- ---------------------- - ------------------- - -- ------ -- ----- -- ------ -- ------
在上面的代码中，我们定义了一个名为 generatorWithValues 的 Generator 函数，它连续产生了三个字符串 'apple'、'banana'、'cherry'，然后在 for..of 循环语句中遍历这三个字符串。
总结
本文主要介绍了 ES6 中引入的 Generator 函数，介绍了 Generator 函数的特点、语法和应用。Generator 函数可以实现函数执行的中断和恢复，使得异步编程变得更加灵活和高效。如果你对异步编程有一定的了解，并且想进一步提高自己的 JavaScript 技能，那么 Generator 函数是一个值得学习的重要知识点。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e6ccd9f6b2d6eab32275c7