迭代器是一种用于遍历数据集合的对象，ES6 中引入了生成器函数（Generator Function）来方便地生成迭代器。ES12 中进一步增强了生成器函数的功能，本文将介绍 ES12 生成迭代器的基础知识和用法。
生成器函数回顾
在 ES6 中，我们可以使用生成器函数来创建迭代器，生成器函数是一种特殊的函数，使用 function* 关键字定义，其中使用 yield 关键字可以暂停函数的执行并返回一个值，下次调用函数时从上次暂停的位置继续执行。
以下是一个简单的生成器函数示例：
-- -------------------- ---- ------- --------- ------------- - ----- -- ----- -- ----- -- - ----- -------- - -------------- ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ ---------- ----- ---- -
可以看到，我们通过 function* 定义了一个生成器函数 myGenerator，其中使用 yield 关键字返回了三个值。我们通过 myGenerator() 调用生成器函数并得到一个迭代器对象 iterator，然后使用 next() 方法遍历迭代器，每次调用都会返回一个包含当前值和是否遍历结束的对象。
生成器函数的新特性
在 ES12 中，生成器函数得到了进一步增强，以下是新增的特性：
1. 生成器函数可以使用 return 关键字返回值
在 ES6 中，生成器函数只能通过 yield 关键字返回值，如果使用 return 关键字会导致函数立即结束。但是在 ES12 中，生成器函数可以使用 return 关键字返回值，并且会立即结束函数的执行。
以下是一个使用 return 关键字的示例：
-- -------------------- ---- ------- --------- ------------- - ----- -- ----- -- ------ -- ----- -- - ----- -------- - -------------- ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ---- - ----------------------------- -- - ------ ---------- ----- ---- -
可以看到，在生成器函数中使用 return 关键字返回了一个值，迭代器在调用 next() 方法时会立即结束并返回该值。
2. 生成器函数可以使用 throw 关键字抛出异常
在 ES6 中，生成器函数无法通过 throw 关键字抛出异常，但是在 ES12 中，生成器函数可以使用 throw 关键字抛出异常，并且可以在函数内部通过 try...catch 捕获异常。
以下是一个使用 throw 关键字的示例：
-- -------------------- ---- -------
--------- ------------- -
--- -
----- --
----- --
----- --- ---------------
- ----- ------- -
-----------------------------
-
-
----- -------- - --------------
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- - ------ -- ----- ----- -
----------------------------- -- -----
----------------------------- -- - ------ ---------- ----- ---- -可以看到，在生成器函数中使用 throw 关键字抛出了一个异常，并且在函数内部通过 try...catch 捕获了该异常。
生成器函数的应用
生成器函数可以用于实现异步编程、迭代器、状态机等场景，以下是一个使用生成器函数实现异步编程的示例：
-- -------------------- ---- -------
-------- -------------- -
------ --- --------------- -- -
------------- -- -
------------- ---- ---------
-- ------
---
-
--------- ------------- -
----- ----- - ----- -------------------------------------------
-------------------
----- ----- - ----- -------------------------------------------
-------------------
----- ----- - ----- -------------------------------------------
-------------------
-
-------- ----------------------- -
----- -------- - ------------
-------- ------------------ -
-- ---------------- -
------ ---------------------------------
-
------ --------------------------------
------- -- --------------------------
-------- -- ----------------------------
-
------ -------------------------
-
--------------------------可以看到，在 myGenerator 函数中使用了 fetchData 函数获取数据，然后使用 yield 关键字暂停函数的执行并返回数据，最后通过 runGenerator 函数执行生成器函数并返回 Promise 对象，使用 Promise 的链式调用实现了异步编程。
总结
ES12 中增强了生成器函数的功能，可以使用 return 关键字返回值，使用 throw 关键字抛出异常，这些新特性可以让生成器函数在实现异步编程、迭代器、状态机等场景时更加方便和灵活。我们可以通过学习生成器函数的基础知识和用法，掌握 ES12 中的生成迭代器技术，提高前端开发的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65843715d2f5e1655def624c