迭代器是 JavaScript 中很重要的一个概念，它在很多场景下都可以提供方便的遍历的能力。在 JavaScript 中，Array, Map, Set 等内置数据结构都提供了内置迭代器来帮助我们完成数据的遍历操作。同时，我们也可以通过 ES6 的 Iterator 和 Generator 实现自定义迭代器来满足特定的需求。
Iterator 和 Generator 的基本概念
在介绍自定义迭代器之前，先来简单介绍一下 Iterator 和 Generator.
Iterator
Iterator 迭代器是一个带有可迭代的接口的对象，它通过一次次调用 next 方法来遍历数据，并且返回一个包含 value 和 done 两个属性的对象。
其中，value 表示当前迭代器指向的值，done 表示当前迭代器是否已经遍历结束。
const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();
console.log(iterator.next()) // { value: 1, done: false }
console.log(iterator.next()) // { value: 2, done: false }
console.log(iterator.next()) // { value: 3, done: false }
console.log(iterator.next()) // { value: undefined, done: true }Generator
Generator 生成器是一个可以暂停执行的函数，其每次运行到 yield 关键字时会返回 yield 后面的值，并暂停函数的执行，下次再汇总调用的时候从 yield 语句暂停的地方继续执行，直到完成所有的 yield。
-- -------------------- ---- ------- --------- ----------- - ----- -- ----- -- ----- -- - ----- -------- - ------------ ---------------------------- -- - ------ -- ----- ----- - ---------------------------- -- - ------ -- ----- ----- - ---------------------------- -- - ------ -- ----- ----- - ---------------------------- -- - ------ ---------- ----- ---- -
使用 Iterator 和 Generator 实现自定义迭代器
通过了解 Iterator 和 Generator，我们可以开始尝试实现自定义迭代器了。下面是一个简单的案例：
-- -------------------- ---- -------
----- ---------- - -
-------------------- -
----- --
----- --
----- --
-
-
--- ------ ----- -- ----------- -
------------------
-
-- -
-- -
-- -在这个例子中，我们定义了一个名为 myIterator 的迭代器对象，通过定义 *Symbol.iterator 方法来返回一个 Generator，并在 Generator 中定义了三个 yield 语句，分别返回 1，2 和 3 三个值。
在 for of 循环中，我们通过迭代 myIterator 来获取其内部的所有值。
除了以上例子中的方式，我们还可以使用 class 来定义自定义迭代器。下面是一个使用 class 定义的例子：
-- -------------------- ---- -------
----- ---------- -
------------------ -
---------- - ------
------------ - --
-
-------------------- -
----- ------------- - ----------- -
----- ---------------
-
-
-
----- -------- - --- --------------
--- ------ ----- -- --------- -
-------------------
-
-- -
-- -
-- -在这个例子中，我们定义了一个 MyIterator 类来表示自定义迭代器。通过在类中实现 *Symbol.iterator 方法并返回一个 Generator，来生成我们期望的值。
总结
通过以上的介绍，我们可以知道通过 ES6 的 Iterator 和 Generator 可以很方便的实现自定义迭代器。这对于一些特定的场景，特殊的数据结构来说都是很有帮助的。通过自定义迭代器，我们可以更好的控制数据的遍历流程，满足我们的特定需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b2168148841e9894e6821d