ES6 中引入了 generator 的概念，它是一种特殊的函数，可以在函数执行中暂停和恢复状态，从而实现生成中间值的功能。在前端开发中，generator 有着很多常用场景及案例，本文将详细介绍。
生成器函数的基本语法
在 ES6 中，生成器函数使用 function* 关键字来定义，函数体内部可以使用 yield 语句来实现暂停和恢复状态。
function* myGenerator() {
yield 1;
yield 2;
yield 3;
}调用生成器函数时，不会立即执行函数体，而是返回一个 generator 对象，可以通过调用其 next 方法来执行函数体，并返回 yield 语句后面的值。
const iterator = myGenerator(); console.log(iterator.next().value); // 1 console.log(iterator.next().value); // 2 console.log(iterator.next().value); // 3
在调用 next 方法时，还可以传递一个参数，该参数会作为上一个暂停的 yield 语句的返回值。
-- -------------------- ---- ------- --------- ------------- - ----- - - ----- -------- ----- - - ----- -------- ----- - - -- - ----- -------- - -------------- ----------------------------------- -- ------- ------------------------------------ -- ------- ------------------------------------ -- -
常用场景及案例
1. 异步编程
在早期的 JavaScript 开发中，异步编程多使用回调函数的方式，但是嵌套的回调函数会导致代码可读性差，出错率高。而使用 generator 可以轻松实现异步编程，让代码更清晰易读。
-- -------------------- ---- -------
-------- -------------- -
------ ------------------- -- ------------
-
--------- ------------- -
--- -
----- ----- - ----- ---------------------------------------
----- ----- - ----- ------------------------------------------------------
-------------------
- ----- ------- -
-------------------
-
-
-------- ---------------------- -
-- ----------- ---------
-------- -------------- -
----- ------ - ---------------------
-- -------------- -
-------------------------- ----- -- -----------------------
-
-
----------
-
----------------------------2. 迭代器
生成器函数可以返回一个迭代器对象，该对象除了具有 next 方法外还可以迭代对象成员和逆向迭代。
-- -------------------- ---- -------
--------- ------------- -
----- ----
----- ----
----- ----
----- ----
-
----- -------- - --------------
--------------------------- -- ----- ---- ---- ----
--- ------ ----- -- --------- -
------------------- -- --- --- --- ---
-
----- --------------- - -
-------------------- -
----- --- - ----- ---- ---- -----
--- ---- - - ---------- - -- - -- -- ---- -
----- -------
-
--
--
---------------------------------- -- ----- ---- ---- ----3. 生成器与协程
协程是指具有单线程执行并支持多个入口点的程序，其与线程不同的是没有操作系统的干预，可自由切换执行过程中的上下文环境。在 JavaScript 中，generator 可以和事件循环机制结合，实现协程的效果。
-- -------------------- ---- -------
-------- ---------------- ------ -
------ --- --------------- -- -
------------- -- -
---------------
-- ----
---
-
--------- ------- -
----- - - ----- ------------------ ---
---------------
----- - - ----- ------------------ ---
---------------
------------- - ---
-
----- -------- --------------------- -
----- --- - ----------
-- -------------
----- -------- -------------- -
----- ------ - ----------------
-- -------------- -
----- ---------------------------
-
-
----- ----------
-
--------------------总结
本文介绍了 ES6 中 generator 的基本语法和常用场景及案例。使用 generator 可以方便地实现异步编程、迭代器和协程等功能。希望通过学习本文，可以更好地掌握 generator 在前端开发中的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450bb9c980a9b385b9aa55f