JavaScript 中有多种循环方法，其中 for...of 语法是一个强大的迭代器，它允许我们遍历各种数据类型。为了实现自定义迭代，ES6 中还引入了一种新的接口——迭代器接口（Iterator）。在本篇文章中，我们将详细介绍如何使用 Iterator 和 for...of 语法实现自定义迭代。
迭代器接口
迭代器是一个对象，它实现了迭代器接口。该接口包含一个名为 next 的方法，该方法返回一个带有两个属性的对象：value 和 done。value 属性表示迭代器当前位置的值，done 属性表示迭代器是否已经迭代完了所有的元素。
一个迭代器可以使用 for...of 语法遍历迭代器返回的值。下面是一个实现迭代器接口的例子：
-- -------------------- ---- -------
--- ---------- - -
------------------ --------- -- -
----- --
----- --
----- --
-
-
--- ---- ----- -- ----------- -
-------------------
-
-- -------
-- -
-- -
-- -在上面的例子中，我们创建了一个对象 myIterable，它实现了迭代器接口。为了实现这个接口，我们使用了生成器函数来定义 Symbol.iterator 这个特殊的属性，并返回一个含有三个数字的迭代器对象。然后我们使用 for...of 语法来遍历这个对象，打印出了每个值。
自定义迭代器
如果我们想要在自己的对象上实现类似的迭代器，我们需要使用 Symbol.iterator 来定义自己的迭代器接口。在这个示例中，我们将创建一个名为 Company 的对象，它将代表公司的员工名单，我们将使用自定义迭代器来遍历员工列表。
-- -------------------- ---- -------
----- ------- -
------------- -
-------------- - ---
-
--------------------- -
------------------------------
-
------------------- -
--- ----- - --
--- --------- - ---------------
------ -
----- ---------- -
-- ------ - ----------------- -
------ - ------ ------------------- ----- ----- --
- ---- -
------ - ----- ---- --
-
-
-
-
-
--- --------- - --- ----------
-------------------------------
-----------------------------
---------------------------------
--- ---- -------- -- ---------- -
----------------------
-
-- -------
-- -----
-- ---
-- -------在这个示例中，我们首先定义了一个名为 Company 的类，它有一个 employees 数组，其中存储了公司所有的员工。然后我们使用 addEmployee 方法来向列表中添加员工。
[Symbol.iterator] 方法定义了 Company 类的迭代器接口。它返回一个包含 next 方法的对象。next 方法是一个包含两个属性的对象，done 和 value，表示迭代器是否已经迭代完了所有的值和当前迭代的元素。value 属性返回当前的元素，如果迭代器已经迭代完了所有的值，则返回 undefined。
在 next 方法的内部实现中，我们使用一个变量 index 来记录当前迭代的元素的位置，并检查该位置是否小于员工数组的长度。如果是，我们返回一个包含当前值 (employees[index++]) 和 done: false 的对象；否则我们返回一个简单的 done: true 对象来表示已经迭代完了所有的值。
在这个示例中，我们使用 for...of 语法来遍历 myCompany 对象，打印所有员工的名字。
总结
使用 ES6 中的迭代器接口和 for...of 语法，可以方便地实现自定义迭代器。我们只需要在对象上定义 Symbol.iterator 方法，然后使用一个带有 next 方法的对象来返回值。我们希望这篇文章能够帮助你更好地理解 JavaScript 中的迭代器和 for...of 循环语法，并能够轻松地使用它们来自定义迭代器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64edcbc6f6b2d6eab37f36e1