Generator 函数是 ES6 中新增的一种语法，它可以通过在函数名前面添加一个 * 号来定义，相比普通函数，Generator 函数拥有更加灵活的控制流程和状态管理能力。在 ES8 中，Generator 函数迎来了新的特性，本文将对这些特性进行详细分析，并介绍在实际开发中 Generator 函数的应用场景。
Generator 函数简介
在 ES6 中，Generator 函数的定义如下：
--------- --------------- -
----- ---------
----- ---------
----- ---------
-其中，函数名前的 * 号表示这是一个 Generator 函数。Generator 函数的特殊之处在于它可以用 yield 关键字来暂停执行，并通过 next() 方法恢复执行，从而实现函数的暂停和恢复。例如，在上面的例子中，我们可以这样使用 Generator 函数：
----- --- - ---------------- ------------------------ -- - ------ --------- ----- ----- - ------------------------ -- - ------ --------- ----- ----- - ------------------------ -- - ------ --------- ----- ----- - ------------------------ -- - ------ ---------- ----- ---- -
在上面的代码中，我们首先以 generatorFunc() 的返回值创建了一个 Generator 对象 gen，然后通过调用 gen.next() 方法来逐个获取 generatorFunc() 中 yield 语句返回的值。每次调用 next() 方法时，Generator 函数会从上一次暂停的位置恢复执行，直到遇到下一个 yield 语句或函数结束。
ES8 中 Generator 函数的新特性
在 ES8 中，Generator 函数引入了以下新的特性：
1. Async/Await
Async/Await 是利用 Generator 函数实现异步编程的语法糖。在 ES8 中，我们可以使用 async/await 来简化 Promise 的使用，使得异步代码更加易读易写。例如，下面是一个使用 async/await 实现的异步函数：
-------- ----------- -
------ --- --------------- -- -
------------- -- ----------------- ------
---
-
----- -------- ----------- -
------------------- --------------
----- ---- - ----- ------------
------------------
------------------ --------------
-
------------在上面的代码中，我们首先定义了一个返回 Promise 对象的函数 fetchData()，然后定义了一个 async 函数 asyncFunc()，在该函数中我们使用 await 关键字来等待 fetchData() 返回数据。在 asyncFunc() 内部，所有使用 await 关键字等待异步操作结果的代码都会被自动转换为 yield 语句，从而实现了异步函数的同步化编写方式。
2. 函数参数传递
在 ES8 中，Generator 函数的 next() 方法可以接收一个参数，该参数会作为上一个 yield 语句的返回值。例如，下面的代码展示了如何在 Generator 函数内部给上一个 yield 语句传递参数：
--------- --------------- -
----- ----- - ----- ---------
----- --------------------
-
----- --- - ----------------
------------------------ -- - ------ --------- ----- ----- -
------------------------------- -- - ------ -------- ----- ----- -
------------------------ -- - ------ ---------- ----- ---- -在上面的代码中，我们定义了一个 Generator 函数 generatorFunc()，其中第一个 yield 语句返回 'value1'，而第二个 yield 语句则返回传递给它的参数 value 的大写形式。通过调用 gen.next('hello')，我们将 'hello' 作为参数传递给了上一个 yield 语句，从而得到 'value1' 和 'HELLO' 两个返回值。
Generator 函数的应用场景
Generator 函数的灵活控制流程和状态管理能力使得它们在各种场景下都能发挥重要作用。以下是一些常见的 Generator 函数应用场景：
1. 异步流程控制
利用 Generator 函数的 yield 和 next() 方法，我们可以将异步操作整合到一个函数流程中，实现异步代码的同步化编写方式。例如，我们可以使用 async/await 和 Promise.all() 来控制多个异步操作的执行顺序：
----- -------- -------------- -
----- ----- - ----- -------------
----- ----- - ----- -------------
----- ----- - ----- -------------
------ ------- ------ -------
-
----- -------- --------------- -
----- --- - -------------------------- ------------- ---------------
----- ------- ------ ------ - ----- ----
------ ------- ------ -------
-
--------- --------------- -
----- ----- - ----- -------------
----- ----- - ----- -------------
----- ----- - ----- -------------
------ ------- ------ -------
-在上面的示例中，fetchAllData()、fetchAllData2() 和 fetchAllData3() 都实现了对多个异步数据的获取，但它们使用的方式不同：fetchAllData() 和 fetchAllData2() 都使用了 async/await 和 Promise.all()，而 fetchAllData3() 则使用 yield 和 Generator 函数。尽管使用 Generator 函数的方式代码略显冗长，但是它的可读性更好，并且可以更加细粒度的控制异步操作的执行顺序。
2. 资源释放和清理
在个别情况下，我们需要手动释放和清理一些资源，例如打开的文件或数据库连接。利用 Generator 函数的 finally{} 块，我们可以很方便地实现资源的自动释放和清理。以下是一个使用 Generator 实现的文件读取示例：
--------- ------------------ -
--- ---- - -----
--- -
---- - ----- --------------------- --------
------------------
- ------- -
-- ------ -
-------------
----------------- --------- ----------
-
-
-
----- --- - ------------------------------
----- - ----- - - -----------
------------- -- -
------------- ------------ -------------
---在上面的代码中，我们定义了一个 readFile() Generator 函数，该函数使用了 try-finally 的语法结构来保证文件流对象的自动关闭。在调用 gen.next() 方法后，我们使用 Promise 对象的 then() 方法来处理异步操作结果，随后使用 gen.throw() 方法向 Generator 函数中抛出一个错误，从而触发 finally{} 块的执行。
总结
在 ES8 中，Generator 函数引入了异步流程控制和函数参数传递两个新特性，同时也保留了其原有的灵活控制流程和状态管理能力。在实际前端开发中，我们可以利用 Generator 函数来简化异步代码，实现资源的自动释放和清理，以及更加细粒度的控制异步操作的执行顺序。掌握 Generator 函数的使用方式和应用场景，对于提升前端开发代码质量和效率具有重要意义。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6469a70d968c7c53b09825f5