1. Iterables 和 Iterators 的定义
在 ES6 中，Iterables 和 Iterators 分别是两个重要的概念。Iterables 表示可迭代对象，即可以被循环遍历的对象；而 Iterators 则是迭代器，用于迭代遍历可迭代对象中的每一个元素。
具体来说，可迭代对象是一种有序的集合，其中包含了一系列的数据并且具有迭代器（Iterator），可以通过该迭代器遍历所有的数据。在 ES6 中，所有的集合对象（例如 Array、Set 和 Map 等）都是可迭代对象。
而迭代器是一个对象，它定义了在可迭代对象中遍历数据的方式。迭代器通常会有两个方法：next() 和 return()。其中，next() 方法用于返回可迭代对象的下一个数据，而 return() 方法则用于提前中止迭代。
2. 使用 Iterables 和 Iterators
在 ES6 中，我们可以使用 for...of 循环语句来遍历可迭代对象：
let arr = ['a', 'b', 'c'];
for (let value of arr) {
console.log(value);
}上面的代码中，我们将循环变量命名为 value，然后通过 for...of 循环语句遍历了 Array 对象 arr 中的所有数据。当遍历到最后一个元素时，循环就会停止。
除了使用 for...of 循环语句外，我们还可以通过迭代器来手动遍历可迭代对象：
let arr = ['a', 'b', 'c'];
let iterator = arr[Symbol.iterator]();
while (true) {
let result = iterator.next();
if (result.done) break;
console.log(result.value);
}上面的代码中，我们首先取出了 Array 对象 arr 的迭代器，然后利用 while 循环来遍历这个可迭代对象。如果迭代器已经到达了最后一个元素，那么 next() 方法返回的 result 对象的 done 属性就会变为 true，我们就可以跳出循环。
3. 自定义 Iterables 和 Iterators
除了 ES6 中常见的集合对象外，我们还可以自定义一个可迭代对象和迭代器。具体方法是在对象中添加 Iterator 接口。
下面是一个自定义的可迭代对象和迭代器：
-- -------------------- ---- -------
--- ---------- - -
----- --------- -------- -----
-- -- -------- --
------------------- -
--- ----- - --
--- ---- - ----------
-- ---------
------ -
------ -
-- ------ - ------------ -
------ - ------ -------------- ----- ----- --
- ---- -
------ - ------ ---------- ----- ---- --
-
--
-------- -
--------------------- --- ---- -------- -----------
------ - ----- ---- --
-
-
-
--
--- ---- ----- -- ----------- -
-------------------
-在上面的代码中，我们定义了一个名为 myIterable 的对象，并手动添加了迭代器接口。这个迭代器包含了两个方法：next() 和 return()，其中 next() 方法会返回一个对象，该对象的 value 属性表示迭代器当前遍历的元素值，而 done 属性则表示迭代器是否已到达结束状态。
自定义迭代器可以使我们更自由地控制数据的处理和遍历顺序，例如可以根据实际需求进行过滤和排序操作。
4. 总结
通过本文，我们了解了 ES6 中 Iterables 和 Iterators 的基本概念和用法，并通过示例代码演示了如何对可迭代对象进行遍历操作，以及如何自定义迭代器实现更为灵活的数据处理。
掌握 Iterables 和 Iterators 的知识可以使我们更好地理解和使用 ES6 中的集合对象，同时也为我们提供了更多的数据处理工具和方法，帮助我们更高效地开发前端应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e95ac8f6b2d6eab34a921f