在传统 JavaScript 中，一个函数的执行是连续的，如果其中某个任务比较耗时，那么整个程序会被阻塞，导致用户体验变得很差。
为了解决这个问题，ES6 引入了 yield 关键字和 generator 函数，可以让我们更加优雅地完成异步编码。本文将详细介绍这两个概念，并提供示例代码和学习指导。
yield 关键字
yield 是一个关键字，必须在 generator 函数内部使用。当执行到 yield 语句时，函数会立即暂停执行，并将 yield 后面的值返回给调用者。等到调用者再次调用函数时，执行会从上一次停止的地方继续进行。这个过程可以被反复执行，返回多个值。
以下是一个简单的例子，演示 yield 关键字的使用方法：
--------- ------------------ - ----- -- ----- -- ------ -- - ----- -------- - ------------------- ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ---- -
在这个例子中，我们定义了一个 generator 函数 generateSequence，其中包含了三个 yield 语句和一个 return 语句。我们首先创建了一个 iterator 对象，然后反复调用它的 next 方法。
每当我们调用 next 方法时，generateSequence 函数就会在 yield 关键字处立即暂停执行，并返回一个包含当前 yield 后面的值的对象。done 属性表示该对象是否是 iterator 的最后一个返回值。当返回值是最后一个值时，done 为 true，否则为 false。
generator 函数
generator 函数是一个可以反复返回 yield 值的函数，要以 * 符号开头，同时内部包含一条或多条 yield 语句。
以下是一个使用 yield 关键字的 generator 函数的例子：
--------- ----------- -
--- - - --
--- - - --
----- ------ -
--- --- - - - --
- - --
- - ----
----- --
-
-
----- ----------------- - ------------
-------------------------------------- -- - ------ -- ----- ----- -
-------------------------------------- -- - ------ -- ----- ----- -
-------------------------------------- -- - ------ -- ----- ----- -
-------------------------------------- -- - ------ -- ----- ----- -在这个例子中，我们定义了一个久负盛名的 Fibonacci 数列，它包含了一个 while 循环和一个 yield 语句。使用迭代器，我们可以按顺序获取 Fibonacci 数列中的每个值。
generator 函数的好处在于，它可以帮助我们优雅地完成异步编码。使用它，我们可以替换掉原来的回调、Promise、async/await 等方式。
使用 generator 函数完美地解决异步回调问题
以下是一个简单的例子，演示如何使用 generator 函数配合 Promise 完成异步编码：
-------- -------------- -
------ --- ----------------- ------- -- -
----- --- - --- -----------------
---------- - -- -- -
-- ----------- --- ---- -
----------------------
- ---- -
-----------------------
-
--
----------- - -- -- -
-----------------------
--
--------------- -----
-----------
---
-
--------- ---------------- -
--- -
----- ----- - ----- ----------------------------------------------------------
-------------------
----- ----- - ----- ---------------------------------------------------------------------------- - -----
-------------------
------ ---- ---- ----------
- ----- ------- -
-------------------
-
-
----- -------- - -----------------
--- ------ - ----------------
---------------------- -- -
------ - --------------------
---------------------- -- -
------ - --------------------
--------------------------
---
---在这个例子中，我们定义了两个异步数据获取的函数 fetchData 和 fetchGenerator。fetchData 函数负责使用 XMLHttpRequest 发送 HTTP 请求。fetchGenerator 函数使用 yield 语句获取 fetchData 函数的返回值，同时使用 try...catch 在代码出现错误时捕捉异常。
在程序开头，我们创建了一个 fetchGenerator 的迭代器，并将第一个异步调用执行。在 Promise 给出反馈时，我们会使用迭代器的 next 方法推动异步执行，下一个 Promise 的返回值将变成该 Promise 的 yield 表达式的值。
需要注意的是，我们需要递归式地使用 Promise 的 then 方法来遍历迭代器中的所有 yield 值。
学习指导
了解 yield 关键字和 generator 函数是一个深有内涵的话题。为了更好地掌握这个概念，建议你多从以下几个方面深入学习：
- 生成器函数（generator function）本质
- yield 关键字的含义和写法
- 迭代器协议的重要性
- generator 函数如何解决异步回调问题
同时，练习一些有关 async 和 await 的例子和代码，帮助你更深入理解和应用这个概念。
总结
ES6 的 yield 和 generator 让异步编码变得更加优雅。使用 yield 关键字可以在函数内部暂停执行，并返回 yield 后面的值，等待下一次调用。使用 generator 函数，可以反复返回 yield 值的函数，并配合迭代器协议处理异步回调问题。深入学习这个概念，将帮助我们更好地编写 JavaScript 代码，提高程序性能和用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6486d39b48841e9894564586