在前端开发中，我们经常需要对数组、对象等进行遍历操作。ES6 标准中引入了两个重要的协议：迭代器协议和可迭代协议，它们为我们提供了一种更加灵活、方便的遍历方法。本文将详细讲解这两个协议的作用、使用方法和使用注意事项，让读者更加深入地了解它们。
迭代器协议
迭代器协议规定了一个对象必须具备哪些方法才能被称为“迭代器”。一个迭代器必须实现一个名为 next 的方法，返回一个包含 value 和 done 两个属性的对象。其中 value 表示当前指针所指向的值，done 表示迭代器是否已经遍历完毕。
下面是一个简单的例子，通过迭代器协议实现一个可以遍历数组的迭代器：
const arr = [1, 2, 3, 4, 5];
const iterator = arr[Symbol.iterator](); // 获得迭代器对象
let nextResult = iterator.next();
while (!nextResult.done) {
console.log(nextResult.value); // 依次输出数组中的元素
nextResult = iterator.next();
}上述代码中，我们通过数组的 Symbol.iterator 方法获得了一个迭代器对象 iterator，然后不断通过 iterator.next() 方法遍历数组中的元素。
除了数组，ES6 中的大部分集合对象（如 Set、Map、String）都实现了迭代器协议，因此我们可以用类似的方式去遍历它们。而对于自定义对象，我们只需要实现 Symbol.iterator 方法返回一个迭代器对象即可。
值得注意的是，当迭代器遍历到最后一个元素时，next 方法必须返回 {value: undefined, done: true}，以表示遍历结束了。
可迭代协议
可迭代协议规定了一个对象必须具备哪些方法才能被称为“可迭代对象”。一个可迭代对象必须实现一个名为 Symbol.iterator 的方法，该方法必须返回一个迭代器对象。
下面是一个使用可迭代协议实现的例子，通过 for…of 循环遍历一个数组：
const arr = [1, 2, 3, 4, 5];
for (const item of arr) {
console.log(item); // 依次输出数组中的元素
}for…of 循环的原理就是通过调用数组的 Symbol.iterator 方法来获得一个迭代器对象，然后依次调用 next 方法遍历元素。因此，只要一个对象实现了可迭代协议，就可以被 for…of 循环遍历了。
需要注意的是，如果一个对象同时实现了迭代器协议和可迭代协议，则 Symbol.iterator 方法应该返回该对象的迭代器实例本身，而不是一个新的迭代器对象。
示例代码
下面是一个自定义对象实现可迭代协议的示例代码：
-- -------------------- ---- -------
----- ---------- -
------------- -
---------- - ---
------------ - --
-
--------- -
----------------------
-
------------------- -
----- ------ - ------------------
--- ----- - --
------ -
----- -- -- -
-- ------ - ------- -
----- ------ - ------- ------------------ ----- -------
--------
------ -------
- ---- -
------ ------- ---------- ----- ------
-
-
-
-
-
----- ---------- - --- -------------
--------------------
--------------------
--------------------
--- ------ ---- -- ----------- -
------------------ -- ---------- -- -- -
-上述代码中，我们实现了一个 Collection 类，表示一个集合对象。该类有一个 items 属性，表示这个集合中存储的元素，add 方法用于向集合中添加元素，Symbol.iterator 方法用于返回一个迭代器对象。当 for…of 循环迭代这个对象时，会依次输出集合中存储的每个元素。
总结
迭代器协议和可迭代协议为我们提供了更加优雅、方便的遍历方式，可以让我们更加方便地处理多个集合对象。在实际开发中，我们应该充分利用这些协议，来提高代码的可读性和复用性。同时，需要注意引入新协议可能会带来的降低代码可读性、增加学习成本等问题，需要在权衡利弊后选择使用，以达到最优的开发效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b5c62968c7c53b0db4292