随着 JavaScript 的不断发展，ES6 的新增特性为我们提供了更多便利与灵活性。其中，yield 和 generator 模式是一个非常重要的特性，尤其是在异步编程中，它们扮演着不可或缺的角色。
什么是 generator
ES6 的 generator 是一个函数或者方法，它可以按需生成多个值，这些值的生成过程可以暂停及继续。generator 获取值的方式是通过 yield 关键字，yield 的作用是返回一个值，并暂停 generator 的执行。
一个最简单的 generator 函数如下：
function* myGenerator() {
yield 1;
yield 2;
yield 3;
}通过该代码，我们可以得到一个 generator 对象，我们可以通过迭代器读取该对象中的值：
const mg = myGenerator();
console.log(mg.next()); // { value: 1, done: false }
console.log(mg.next()); // { value: 2, done: false }
console.log(mg.next()); // { value: 3, done: false }
console.log(mg.next()); // { value: undefined, done: true }可以看到，每次调用 mg.next() 时，我们可以得到一个对象，这个对象有两个属性，value 和 done。value 表示 yield 后面的返回值，done 表示 generator 是否已经完成。
yield 的作用
yield 是 generator 中最重要的关键字，它的作用是暂停 generator 的执行，等待下一次调用。例如：
-- -------------------- ---- ------- --------- ------------- - --------------------- ----- -- ---------------------- ----- -- ------------------- - ----- -- - -------------- ----------------------- -- ----- - ------ -- ----- ----- - ----------------------- -- ------ - ------ -- ----- ----- - ----------------------- -- --- - ------ ---------- ----- ---- -
可以看到，每次执行到 yield 时，generator 的执行都会暂停，等待下一次调用。在这个例子中，当 yield 1 执行后，generator 的执行就会暂停，等待下一次调用。
generator 的参数
generator 可以接受外部传入的参数，这些参数可以用来控制 generator 中的执行。例如，我们可以用一个简单的例子来阐述这个问题：
-- -------------------- ---- ------- --------- ------------- - ----- - - ----- ------ - ------ -- ----- - - ----- ------ - ------ -- ----- ---- --- -- ---- --- ---- -- --- - ----- - ----- -- - -------------- ----------------------- -- - ------ ------ - ------ -- ----- ----- - ------------------------ -- - ------ ------ - ------ -- ----- ----- - ------------------------ -- - ------ ---- --- -- - --- - -- ---- ----- ----- - ----------------------- -- - ------ ---------- ----- ---- -
在这个例子中，我们可以看到每次调用 yield 时，generator 中间会暂停，然后等待外部传入的参数。当参数传入后，generator 再根据参数继续执行。
generator 的嵌套
generator 可以相互嵌套，这种嵌套我们通常称之为 yield*。yield* 可以在 generator 中调用另一个 generator，实现递归执行。例如：
-- -------------------- ---- ------- --------- ------------- - ----- -- ------ ----------------- ----- -- - --------- ---------------- - ----- -- ----- -- - ----- -- - -------------- ----------------------- -- - ------ -- ----- ----- - ----------------------- -- - ------ -- ----- ----- - ----------------------- -- - ------ -- ----- ----- - ----------------------- -- - ------ -- ----- ----- - ----------------------- -- - ------ ---------- ----- ---- -
可以看到，当 generator 中调用 yield* otherGenerator() 时，执行会转移到 otherGenerator 中，然后在执行结束后再返回原来的 generator。
generator 的使用场景
generator 可以在很多场景下使用，比如用来做异步编程、处理大数据流等。
异步编程
异步编程是 generator 最常使用的场景之一，因为 generator 可以在异步编程中帮忙管理异步操作的顺序。例如：
-- -------------------- ---- -------
-------- ------------ -
------ --- --------------- -- ------------------- --------
-
--------- ------------- -
---------------------
----- ------------
------------------ - ---------
----- ------------
------------------ ------- - ----------
-
----- -------- ----- -
----- -- - --------------
----- ------ -
----- ------- ----- - ----------
-- ------ -
------
-
----- ------
-
-
------在这个例子中，我们可以看到，generator 在异步编程中扮演了非常重要的角色，它帮我们维护了异步操作的顺序，并按照我们指定的顺序进行执行。
处理大数据流
generator 也可以用来处理大数据流。在大数据流处理中，我们可能遇到一个问题，即我们无法将所有数据同时加载到内存中进行处理。因此，我们需要在数据流中逐个处理数据，generator 正好可以满足这个需求。
-- -------------------- ---- -------
--------- ----------------- -
--- ---- - - -- - - ------------ ---- -
----- --------
-
-
----- ---- - ---------------------------
----- -- - ------------------
--- ------ - -- --- -
---------------
-在这个例子中，我们可以看到使用 generator 处理大数据流的过程。我们通过一个 for 循环逐个处理数据，而 generator 则帮助我们指定数据的顺序。
总结
generator 是 ES6 中非常重要的一个特性，通过它我们可以实现异步编程、处理大数据流等。在使用 generator 时，需要注意 yield 关键字的作用，以及 generator 的嵌套、参数的传递等问题。在实际应用中，可以根据自己的需求灵活使用 generator，发挥出它的最大潜力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65225b7795b1f8cacd9c848c