一、Generator 的概念
Generator 是 ES6 引入的一种新的函数类型，它可以控制函数的执行过程，使其可以被暂停和恢复。在 Generator 函数内部，通过 yield 语句可以产生中间结果，并通过 next 方法传回给调用者。Generator 函数可以作为一个 Iterator 迭代器，在 for…of 循环中被使用。
二、Generator 的语法
Generator 函数可通过 function* 关键字来声明，函数内部通过 yield 语句产生中间结果，通过 return 语句结束函数执行。
function* generatorFunc() {
yield 'a';
yield 'b';
return 'c';
}Generator 函数可使用 next 方法来控制函数的执行过程，每次调用 next 方法会执行到下一个 yield 语句，并将 yield 的值作为返回值返回。
const iterator = generatorFunc();
console.log(iterator.next()); // { value: 'a', done: false }
console.log(iterator.next()); // { value: 'b', done: false }
console.log(iterator.next()); // { value: 'c', done: true }三、Generator 的应用场景
1. 控制异步执行流程
Generator 函数可以控制异步执行流程，通过 yield 语句将异步调用转换为同步调用，在异步操作完成后通过 next 方法恢复 Generator 函数执行。
-- -------------------- ---- -------
--------- ----------- -
----- ------ - ----- ------------
--------------------
-
-------- ----------- -
------ --- ----------------- ------- -- -
------------- -- -
-----------------------
-- ------
---
-
----- -------- - ------------
----- ------- - ----------------------
--------------------- -- -
----------------------
---2. 实现状态机
Generator 函数可以作为实现状态机的工具，每次调用 next 方法前将状态记录在 Generator 函数内部，在下一次调用 next 方法时从上一个状态继续执行。通过此种方式实现状态机可使状态的切换更容易管理和维护。
-- -------------------- ---- -------
--------- -------------- -
--- ----- - -------
----- ------ -
------ ------- -
---- -------
----------------- --------
----- - ----- -------
------
---- ----------
-------------------- --------
----- - ----- ----------
------
---- ------
---------------- --------
------ ------
--------
----- --- -------------- --------
-
-
-
----- -------- - ---------------
-----------------------------
--------------------------------------
----------------------------------3. 遍历数据结构
Generator 函数可以作为 Iterator 迭代器使用，在 for…of 循环中遍历数据结构。在 Generator 函数内部，通过 yield 语句返回数据结构的每个值，在 for…of 循环中通过 next 方法迭代数据结构。
-- -------------------- ---- -------
--------- ------------------ -
----- ---- - ------------------
--- ---- - - -- - - ------------ ---- -
----- --------------
-
-
----- ---- - -
----- ------
---- ---
------- ------
--
--- ------ ----- -- ------------------- -
-------------------
-四、Generator 的使用注意事项
1. 不能使用箭头函数声明 Generator 函数
箭头函数不能声明 Generator 函数，因为在箭头函数内部没有 this、arguments 和 super 变量，这些变量在 Generator 函数中是必须的。
-- -------------------- ---- ------- -- ---- ----- ------------- - --------- -- - -- ----- --------- - -- -- ----------- --- -- ---- --------- --------------- - -- ----- --------- - --------- -- ---
2. yield 语句必须在 Generator 函数内部使用
yield 语句必须在 Generator 函数内部使用，否则会抛出 SyntaxError 错误。在普通函数中使用 yield 语句无法暂停和恢复函数执行。
// 错误示例
function testFunc() {
yield 'test';
}3. Generator 函数必须通过 next 方法调用
Generator 函数必须通过 next 方法调用，否则无法执行 Generator 函数。如果该函数被普通函数调用，则会返回一个函数对象，而不会执行 Generator 函数。
function* testFunc() {
yield 'test';
}
console.log(testFunc()); // {}五、总结
Generator 函数的出现使得 JavaScript 可以实现同步和异步混合编程的能力，实现对异步操作的高度抽象，使得我们能够使用同步的方式来控制异步代码的执行过程。同时，Generator 函数还可以作为实现状态机和遍历数据结构的工具，为我们的开发带来了许多便利。
在实际开发中，我们可以结合异步操作和状态机的需求使用 Generator 函数，通过 yield 语句将异步调用转为同步调用，并记录函数状态，使得代码的编写和维护更加清晰和方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64616f3f968c7c53b02d472e