Generator 是 ES6 中引入的新特性，它可以让我们更方便地实现异步编程，避免回调地狱的问题。本文将详细介绍 Generator 的语法、使用场景以及示例代码。
什么是 Generator
Generator 是一种特殊的函数，可以被暂停和恢复，可以用于异步编程。Generator 函数使用 function* 关键字定义，里面可以使用 yield 关键字实现暂停和恢复。
下面是一个简单的 Generator 函数示例：
-- -------------------- ---- ------- --------- --------------------- - ----- -------- ----- -------- ------ --------- - ----- -- - ---------------------- ----------------------- -- - ------ -------- ----- ----- - ----------------------- -- - ------ -------- ----- ----- - ----------------------- -- - ------ --------- ----- ---- - ----------------------- -- - ------ ---------- ----- ---- -
可以看到，Generator 函数返回的是一个迭代器对象，每次调用 next() 方法都会返回一个包含 value 和 done 两个属性的对象。调用 next() 方法时，Generator 函数会从上一次暂停的地方继续执行，直到遇到下一个 yield 关键字或函数结束。
Generator 的语法
Generator 函数的语法与普通函数类似，只是在函数名前加了一个星号 *，例如：
function* myGenerator() {}在 Generator 函数中使用 yield 关键字可以实现暂停和恢复，例如：
-- -------------------- ---- ------- --------- ------------- - --------------------- ----- -- ---------------------- ----- -- ------------------- - ----- --- - -------------- ------------------------ -- - ------ -- ----- ----- - ------------------------ -- - ------ -- ----- ----- - ------------------------ -- - ------ ---------- ----- ---- -
Generator 函数中的 yield 关键字可以返回任何类型的值，包括对象、数组、函数等等。
Generator 的使用场景
Generator 可以用于处理异步编程，例如：
-- -------------------- ---- -------
--------- ----------- -
----- ----- - ----- --------------------
----- ----- - ----- -----------------------------
------ ------
-
----- --- - ------------
--------------------------- -- -
-------------------------------- -- -
----------------
---
---上面的代码中，Generator 函数 fetchData() 中使用 yield 关键字暂停了代码的执行，等待异步请求返回数据后再继续执行。在调用 next() 方法时，需要将上一次暂停时的数据作为参数传入。
Generator 还可以用于实现状态机，例如：
-- -------------------- ---- -------
--------- -------------- -
--- ----- - --
----- ------ -
------ ------- -
---- --
------------------ ----
----- - ----- ------ ---
------
---- --
------------------ ----
----- - ----- ------ ---
------
---- --
------------------ ----
----- - ----- ------ ---
------
-
-
-
----- -- - ---------------
----------------------- -- - ------ ------ --- ----- ----- -
------------------------ -- - ------ ------ --- ----- ----- -
------------------------ -- - ------ ------ --- ----- ----- -
------------------------ -- - ------ ------ --- ----- ----- -上面的代码中，Generator 函数 stateMachine() 实现了一个简单的状态机，每次调用 next() 方法时返回当前状态，并将下一个状态作为参数传入。
Generator 的示例代码
下面是一个使用 Generator 实现异步编程的示例代码：
-- -------------------- ---- -------
--------- ----------- -
----- ----- - ----- --------------------
----- ----- - ----- -----------------------------
------ ------
-
----- --- - ------------
--------------------------- -- -
-------------------------------- -- -
----------------
---
---下面是一个使用 Generator 实现状态机的示例代码：
-- -------------------- ---- -------
--------- -------------- -
--- ----- - --
----- ------ -
------ ------- -
---- --
------------------ ----
----- - ----- ------ ---
------
---- --
------------------ ----
----- - ----- ------ ---
------
---- --
------------------ ----
----- - ----- ------ ---
------
-
-
-
----- -- - ---------------
----------------------- -- - ------ ------ --- ----- ----- -
------------------------ -- - ------ ------ --- ----- ----- -
------------------------ -- - ------ ------ --- ----- ----- -
------------------------ -- - ------ ------ --- ----- ----- -总结
Generator 是一种特殊的函数，可以实现异步编程和状态机。使用 Generator 可以避免回调地狱的问题，使代码更加清晰和易于维护。在实际开发中，可以根据具体的场景选择是否使用 Generator。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655c68c0d2f5e1655d683481