在前端开发中，生成器是一种极为有用的编程概念，它可以让我们利用函数的执行来生成一系列的值，而不是一次性返回所有值。这在处理大量数据的场景下非常有用，不仅可以提高性能，还可以让代码更加简洁易读。在 ES6 中，JavaScript 引入了生成器的概念，但我们可以使用 ECMAScript 2016（也就是 ES7）中的 Symbol.iterator 来实现一种更加高效的生成器。
Symbol.iterator 简介
Symbol.iterator 是 ES6 中的新特性，它是一种特殊的属性，用于表示一个对象是否为可迭代。在 ES6 中，所有的集合对象如 Array、Map、Set 等都是可迭代的，也就是说它们都有 Symbol.iterator 属性，这个属性指向一个返回迭代器对象的函数。迭代器对象是一个包含 next 方法的对象，这个方法返回一个包含 value 和 done 属性的对象，value 表示当前值，done 则表示是否已经迭代完毕。
生成器实现方式
在 ES6 中，我们可以使用 function* 来定义一个生成器函数，它会返回一个迭代器对象。但是，使用 Symbol.iterator 更加简单明了，只需要定义一个对象并将 Symbol.iterator 属性指向一个生成器函数即可。下面是一个使用 Symbol.iterator 实现生成器的示例代码：
-- -------------------- ---- -------
----- --------- - -
-------------------- -
--- - - --
----- -- - -- -
----- ----
-
-
--
--- ------ ----- -- ---------- -
-------------------
-在这个例子中，我们定义了一个 generator 对象，并将它的 Symbol.iterator 属性指向一个生成器函数，该函数使用 yield 语句来生成一系列的数字。使用 for...of 语句来进行迭代，可以看到控制台分别输出了 0、1 和 2。
Symbol.iterator 特性
使用 Symbol.iterator 实现生成器的方式有很多优点，其中包括：
- 支持异步生成器
- 可以通过继承和混合构造函数等方式重用已有的生成器
- 提供了比 function* 更加简洁的语法
关于第一个优点，可以参考以下示例代码：
-- -------------------- ---- -------
----- -------- ---------------- -
--- - - --
----- -- - -- -
----- --- --------------- -- ------------------- -------
----- ----
-
-
----- ------ - -----------------
--------------------------- -- --------------- ----------
--------------------------- -- --------------- ----------
--------------------------- -- --------------- ----------在这个例子中，我们定义了一个 asyncGenerator 异步生成器，它会在每次迭代间隔 1 秒钟。我们可以定义一个 result 变量来获取迭代器对象，然后使用 result.next().value 来调用异步函数。因为异步函数返回的是一个 Promise 对象，并不能直接像同步函数一样通过 yield 语句返回，因此需要手动调用 Promise 对象的 then 方法来进行下一次的迭代。
关于第二个优点，可以参考以下示例代码：
-- -------------------- ---- -------
----- ------------ -
------------- -
---------- - ---
-
-------------------- -
------ --------------------
-
--------- -
----------------------
-
-
----- ----- ------- ------------ -
--------- -
-- ----------------- -
----------------
-
-
--------- -
------ --------------------------
-
-
----- ----- - --- --------
-------------
-------------
-------------
--- ------ ----- -- ------ -
-------------------
-在这个例子中，我们定义了一个 MyCollection 类，它包含了一个 items 数组和一个生成器函数，这个生成器函数通过 yield* 来遍历 items 数组中的值。然后我们定义了一个 MySet 类，它继承了 MyCollection，并新增了一个 has 方法来判断是否已经存在对应的值。最后我们创建了一个 mySet 实例，并添加了三个值，在 for...of 语句中遍历输出。
关于第三个优点，可以参考以下示例代码：
-- -------------------- ---- -------
----- --- - -
--- -
----- --
----- --
----- --
-
--
--- ------ ----- -- ---- -
-------------------
-在这个例子中，我们定义了一个 gen 对象，它的生成器函数的名称省略了，这是因为我们使用了新的语法。可以看到，它的语法比 function* 更加简洁，同时通过对象字面量的方式实现了生成器的定义。
结论
使用 ECMAScript 2016（ES7）中的 Symbol.iterator 实现生成器是一种更加简洁、明了且使用更加灵活的方式。通过继承、混合构造函数等方式，我们能够轻松地实现一种高度可复用的代码结构，提高代码的可读性和可维护性。通过掌握 Symbol.iterator 的使用，我们能够更加熟练地编写高效的 JavaScript 程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6708faf7d91dce0dc875a1ef