在 ES6 中，引入了一种新的协议：可迭代协议（Iterable Protocol），它定义了一种标准的方式来访问对象的元素。同时，ES6 还引入了一种新的对象类型：可迭代对象（Iterable Object），它实现了可迭代协议。
可迭代协议
可迭代协议是一种约定，它规定了一个对象必须实现 Symbol.iterator 方法，该方法返回一个迭代器对象。迭代器对象必须实现 next 方法，该方法返回一个对象，该对象包含 done 和 value 两个属性。
- done：表示是否已经迭代完所有元素，如果已经迭代完，则为 true，否则为 false。
- value：表示当前迭代到的元素的值。
下面是一个实现可迭代协议的示例：
// javascriptcn.com 代码示例
const myIterable = {
[Symbol.iterator]: function* () {
yield 1;
yield 2;
yield 3;
}
};
for (const value of myIterable) {
console.log(value); // 1 2 3
}在上面的示例中，myIterable 对象实现了 Symbol.iterator 方法，并返回了一个迭代器对象。该迭代器对象使用了 generator 函数来实现迭代器。
可迭代对象
可迭代对象是实现了可迭代协议的对象。在 ES6 中，有许多内置的对象类型，例如数组、字符串、Set、Map 等都实现了可迭代协议。我们可以使用 for...of 循环来迭代这些对象中的元素。
下面是一个使用 for...of 循环来迭代数组中的元素的示例：
const arr = [1, 2, 3];
for (const value of arr) {
console.log(value); // 1 2 3
}在上面的示例中，arr 数组实现了可迭代协议，因此我们可以使用 for...of 循环来迭代该数组中的元素。
自定义可迭代对象
我们也可以自定义实现可迭代对象。下面是一个自定义实现可迭代对象的示例：
// javascriptcn.com 代码示例
class MyIterable {
constructor(array) {
this.array = array;
}
[Symbol.iterator]() {
let index = 0;
const array = this.array;
return {
next() {
if (index < array.length) {
return { value: array[index++], done: false };
} else {
return { done: true };
}
}
};
}
}
const myIterable = new MyIterable([1, 2, 3]);
for (const value of myIterable) {
console.log(value); // 1 2 3
}在上面的示例中，我们定义了一个 MyIterable 类，并实现了可迭代协议。该类的构造函数接受一个数组作为参数，并将该数组存储在实例属性 array 中。该类实现了 Symbol.iterator 方法，并返回一个迭代器对象。该迭代器对象使用了闭包来记录当前迭代到的索引 index，并通过返回一个包含 value 和 done 属性的对象来表示当前迭代到的元素。
总结
可迭代协议和可迭代对象是 ES6 中非常重要的概念。它们提供了一种标准的方式来访问对象的元素，并且可以方便地使用 for...of 循环来迭代元素。我们可以自定义实现可迭代对象，以适应我们的特定需求。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656d2654d2f5e1655d57a31e