ES6 中引入了新的函数类型 generator 函数，可以通过控制函数的执行方式实现更为复杂的流程控制和异步操作。本文将介绍 generator 函数的基本用法和示例，并分析它的深层次特性和学习意义，帮助读者更好地掌握和应用该函数。
generator 函数基本用法
generator 函数的定义和常规函数类似，但在函数名前面加上星号（*）标志函数为 generator 函数，如下所示：
function* myGenerator() {
// generator 函数的代码
}generator 函数执行后会返回一个迭代器对象，该对象的 next() 方法可以控制 generator 函数的执行，通过 yield 关键字将执行流程交出去，并可以在 yield 后跟一个表达式作为最终结果返回给 generator 函数调用者。
注意，generator 函数中不支持使用 return 语句直接结束函数，而是使用 return 关键字返回一个 done: true 的对象，并将表达式作为 value 属性的值，表示 generator 函数的结束和最终返回值。
下面是一个使用 generator 函数实现的简单示例：
-- -------------------- ---- -------
--------- ------------- -
--- - - --
----- -- - -- -
----- ----
-
------ -----------
-
----- ------ - --------------
--------------------------- -- -- - ------ -- ----- ----- -
--------------------------- -- -- - ------ -- ----- ----- -
--------------------------- -- -- - ------ -- ----- ----- -
--------------------------- -- -- - ------ -- ----- ----- -
--------------------------- -- -- - ------ -- ----- ----- -
--------------------------- -- -- - ------ ----------- ----- ---- -
--------------------------- -- -- - ------ ---------- ----- ---- -generator 函数的高级用法
generator 函数相较于普通函数更为灵活，可以实现很多强大的操作。下面是一些 generator 函数的高级用法示例：
1. yield* 表达式
generator 函数中的 yield* 表达式可以方便地将执行流控制交给另一个 generator 函数或可迭代对象，例如：
-- -------------------- ---- ------- --------- -------------- - ----- -- ----- -- ----- -- - --------- ------------- - ----- ---- ----- ---- ------ --------------- ----- ---- - ----- ------ - -------------- --------------------------- -- -- - ------ ---- ----- ----- - --------------------------- -- -- - ------ ---- ----- ----- - --------------------------- -- -- - ------ -- ----- ----- - --------------------------- -- -- - ------ -- ----- ----- - --------------------------- -- -- - ------ -- ----- ----- - --------------------------- -- -- - ------ ---- ----- ----- - --------------------------- -- -- - ------ ---------- ----- ---- -
2. 双向通信
generator 函数是一个双向通信的机制，可以实现 iteratable 和 iterator 可以互相使用的目标。例如下面的代码：
-- -------------------- ---- ------- --------- ------------- - ----- ---- - ----- ------- ----- - --------- ----- ---- - ----- ------- ----- ------- --------- ----- ---- ------ -- ------ - ------- - ----- ------ - -------------- --------------------------------- -- -- ------- ----- - -------- ---------------------------------- -- -- ------- ----- ------- -------- ---------------------------------- -- -- ---- ------ -- --
3. 异步操作
generator 函数的异步操作是使用函数嵌套和 yield 暂停功能实现的，例如下面的代码：
-- -------------------- ---- ------- --------- ----- - ----- ---- - ----- ----------------------------- ----- ---- - ----- ---------------------------------------- ------------------ - --- ------ - ------ --- ------- - -------------- ----------------------- -- - ------ ------------ ------------ -- - --- ------- - ------------------ ------ -------------- ------------ -- - ------------------ ---
上面的示例中，generator 函数 gen() 通过 yield 暂停并等待异步操作完成再执行下一步操作，在异步操作返回结果后通过 next() 方法恢复执行流。由于 fetch 方法返回 Promise 对象，所以要使用 Promise 的 then 方法返回数据，并将数据作为 next() 方法的参数传递给 generator 函数。
generator 函数的学习意义
generator 函数的学习对于掌握现代前端 Web 开发的异步编程非常有帮助。generator 函数通过控制执行流程，可以在高级语义层面上实现很多复杂的流程控制和异步操作，例如实现 co 库的协程功能，实现 async/await 语法等。
同时，了解 generator 函数的使用和实现原理，也可以深入了解 JavaScript 引擎的底层实现和运行机制，对于前端优化和性能调优有一定帮助。
结语
本文通过详细分析 generator 函数的定义和基本用法、高级用法和学习意义，希望能帮助读者更好地掌握和应用该函数。需要注意，在使用 generator 函数时，要注意控制迭代器状态，避免出现死循环或重复调用等问题。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d784cfa941bf7134d79dd6