引言
在前端开发中，我们经常需要处理一些异步操作，例如网络请求、定时器等等。在 ES2015 中，引入了 Promise 和 async/await 等语法来帮助我们更方便地处理异步操作。但是，还有一种强大的语法 yield 和 Generators，它们可以帮助我们更灵活地处理异步操作，而且不仅仅在 ES2015 和 ES2020 中有用，它们的应用范围远不止于此。
Yield 和 Generators
Yield
yield 关键字用于定义一个暂停函数的返回值，它只能在 Generators 函数中使用。当 Generators 函数执行到 yield 语句时，会暂停执行并返回 yield 后面的值，等待下一次调用继续执行。
下面是一个示例：
-- -------------------- ---- ------- --------- ----- - --------------------- ----- -- ---------------------- ----- -- ------------------- - ----- --------- - ------ ----------------- -- ----- - ------ -- ----- ----- - ----------------- -- ------ - ------ -- ----- ----- - ----------------- -- --- - ------ ---------- ----- ---- -
在上面的示例中，Generators 函数 foo 中定义了三个 yield 语句，分别返回了 1、2 和 undefined。在调用 generator.next() 方法时，Generators 函数会从上一次暂停的地方继续执行，直到遇到下一个 yield 语句或者执行完整个函数。
Generators
Generators 函数是一种特殊的函数，它可以暂停执行并返回多个值，而且可以在执行过程中随时停止和恢复执行。在 ES2015 中，Generators 函数一般用于异步编程，可以用来处理网络请求、定时器等异步操作。
下面是一个示例：
-- -------------------- ---- -------
--------- ----------- -
----- ---- - ----- -------------------
----- ------- - ----- ---------------------------------
------ --------
-
----- --------- - ------------
----- -------- - -----------------------
------------------------- -- -
----- -------- - ---------------------------------------
------------------------- -- -
----------------------------------------------- -- -
---------------------
---
---
---在上面的示例中，Generators 函数 fetchUser 中定义了两个 yield 语句，分别返回了两个网络请求的结果。在调用 generator.next() 方法时，会返回一个 Promise 对象，可以通过 Promise 的 then 方法来处理网络请求的结果，并继续执行下一个 yield 语句。
Yield 和 Generators 的更多应用
除了在 ES2015 中用于异步编程外，yield 和 Generators 还有很多其他的应用。
1. 生成器函数的迭代
Generators 函数可以通过 for...of 循环来迭代生成器函数的返回值。
下面是一个示例：
-- -------------------- ---- ------- --------- ----- - ----- -- ----- -- ----- -- - --- ------ ----- -- ------ - ------------------- -
在上面的示例中，Generators 函数 foo 中定义了三个 yield 语句，分别返回了 1、2 和 3。在 for...of 循环中，可以依次迭代生成器函数的返回值，输出 1、2 和 3。
2. 生成器函数的组合
Generators 函数可以通过 yield* 关键字来组合多个生成器函数。
下面是一个示例：
-- -------------------- ---- ------- --------- ----- - ----- -- ----- -- - --------- ----- - ----- -- ------ ------ ----- -- - --- ------ ----- -- ------ - ------------------- -
在上面的示例中，Generators 函数 foo 中定义了两个 yield 语句，分别返回了 1 和 2。Generators 函数 bar 中定义了三个 yield 语句，分别返回了 3、foo 的返回值和 4。在 for...of 循环中，可以依次迭代生成器函数的返回值，输出 3、1、2 和 4。
3. 生成器函数的状态机
Generators 函数可以通过 yield 关键字来实现状态机。
下面是一个示例：
-- -------------------- ---- -------
--------- ------- -
--- ----- - --------
----- ------ -
-- ------ --- -------- -
----- --------
----- - ---------
- ---- -- ------ --- --------- -
----- ---------
----- - ------
- ---- -- ------ --- ------ -
----- ------
----- - --------
-
-
-
----- --------- - --------
-------------- -- -
------------------------------------
-- ------在上面的示例中，Generators 函数 light 中定义了一个状态机，可以依次返回红灯、黄灯和绿灯的状态。在 setInterval 定时器中，可以每隔一秒钟输出一次状态。
总结
yield 和 Generators 是一种强大的语法，可以帮助我们更灵活地处理异步操作，而且不仅仅在 ES2015 和 ES2020 中有用，它们的应用范围远不止于此。我们可以通过 yield 和 Generators 来实现生成器函数的迭代、组合和状态机等功能，从而更好地处理复杂的业务逻辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66372a78d3423812e4551d71