Generator 函数是 ES6 中新增的一种特殊函数，它可以在执行过程中暂停，返回一个中间结果，然后再继续执行。ES12 在 Generator 函数的基础上进行了改进，使其更加强大和灵活。在本文中，我们将详细介绍 ES12 的 Generator 函数，包括其语法、用法和示例代码。
语法
ES12 中 Generator 函数的语法与 ES6 中基本相同，只是在函数名后面加上了一个星号（*），表示这是一个 Generator 函数。它的基本语法如下：
function* generatorFunction() {
// generator function body
}Generator 函数内部可以使用 yield 关键字来暂停执行并返回一个中间结果，也可以使用 return 关键字来结束执行并返回一个最终结果。例如：
function* generatorFunction() {
yield 1;
yield 2;
yield 3;
return 4;
}用法
Generator 函数的最大特点是可以在执行过程中暂停并返回一个中间结果，然后再继续执行。这使得 Generator 函数可以用于异步编程、迭代器和状态机等场景。
异步编程
在异步编程中，Generator 函数可以通过 yield 关键字来暂停执行，等待异步操作完成后再继续执行。例如：
function* asyncFunction() {
const result1 = yield asyncOperation1();
const result2 = yield asyncOperation2(result1);
const result3 = yield asyncOperation3(result2);
return result3;
}在上面的代码中，asyncOperation1()、asyncOperation2() 和 asyncOperation3() 都是异步操作，通过 yield 关键字来暂停执行并等待其完成。最终返回的结果是 asyncOperation3() 的结果。
迭代器
Generator 函数还可以用作迭代器，通过 yield 关键字来返回一个中间结果。例如：
-- -------------------- ---- ------- --------- ------------------ - ----- -- ----- -- ----- -- - ----- -------- - ------------------- ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ -- ----- ----- - ----------------------------- -- - ------ ---------- ----- ---- -
在上面的代码中，iteratorFunction() 返回的是一个迭代器对象，通过 next() 方法来获取中间结果。最终结果的 done 属性为 true，表示迭代结束。
状态机
Generator 函数还可以用作状态机，通过 yield 关键字来暂停执行并返回一个中间结果，然后根据不同的中间结果来执行不同的代码。例如：
-- -------------------- ---- -------
--------- -------------- -
--- ----- - --
----- ------ -
------ ------- -
---- --
----- ------ ---
--------
------
---- --
----- ------ ---
--------
------
---- --
----- ------ ---
----- - --
------
-
-
-
----- ------- - ---------------
---------------------------- -- - ------ ------ --- ----- ----- -
---------------------------- -- - ------ ------ --- ----- ----- -
---------------------------- -- - ------ ------ --- ----- ----- -
---------------------------- -- - ------ ------ --- ----- ----- -在上面的代码中，stateMachine() 返回的是一个状态机对象，通过 next() 方法来获取中间结果。根据不同的中间结果来执行不同的代码，最终结果是一个循环执行的状态机。
示例代码
下面是一些示例代码，演示了 Generator 函数的用法和特点。
异步编程示例
-- -------------------- ---- -------
--------- --------------- -
----- ------- - ----- ------------------
----- ------- - ----- -------------------------
----- ------- - ----- -------------------------
------ --------
-
-------- ----------------- -
------ --- ----------------- -- -
------------- -- -
-----------
-- ------
---
-
-------- ---------------------- -
------ --- ----------------- -- -
------------- -- -
------------- - ---
-- ------
---
-
-------- ---------------------- -
------ --- ----------------- -- -
------------- -- -
------------- - ---
-- ------
---
-
----- ------------- - ----------------
------ -- -- -
--- ----- ------ ------ -- -------------- -
--------------------
-
-----在上面的代码中，asyncFunction() 是一个异步 Generator 函数，通过 yield 关键字来暂停执行并等待异步操作的完成。asyncOperation1()、asyncOperation2() 和 asyncOperation3() 都是异步操作，返回一个 Promise 对象。最终结果通过 for await...of 循环来获取。
迭代器示例
-- -------------------- ---- -------
--------- ----------- -
--- - - --
--- - - --
----- ------ -
----- --
--- -- - --- - - ---
-
-
----- ----------------- - ------------
--- ---- - - -- - - --- ---- -
--------------------------------------------
-在上面的代码中，fibonacci() 是一个 Fibonacci 数列的迭代器，通过 yield 关键字来返回一个中间结果。通过 next().value 来获取中间结果，从而实现 Fibonacci 数列的生成。
状态机示例
-- -------------------- ---- -------
--------- ------------------- -
--- ----- - --------
----- ------ -
------ ------- -
---- --------
----- --------
----- - ---------
------
---- ---------
----- ---------
----- - ------
------
---- ------
----- ------
----- - --------
------
-
-
-
----- ------------ - --------------------
-------------- -- -
---------------------------------------
-- ------在上面的代码中，lightStateMachine() 是一个红绿灯状态机，通过 yield 关键字来暂停执行并返回一个中间结果。根据不同的中间结果来执行不同的代码，最终结果是一个循环执行的状态机。通过 setInterval() 来定时获取中间结果，从而实现红绿灯的循环切换。
总结
ES12 的 Generator 函数是一种非常强大和灵活的函数，可以用于异步编程、迭代器和状态机等场景。通过 yield 关键字来暂停执行并返回一个中间结果，使得代码更加简洁和易读。在实际开发中，我们可以结合 async/await、Promise 和其他语言特性来更好地使用 Generator 函数，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662e1109d3423812e4bbecde