在 ES6 中，迭代器协议（Iterator Protocol）被引入来支持可迭代对象的遍历。此特性是在 JavaScript 1.7 中引入的一个独立的迭代器（Iterator）对象的改进。
- 目的： 提供一种标准的方法来顺序遍历各种不同类型的数据集合。
- 作用： 更为灵活地逐个处理集合中的元素，例如将其全部元素打印出来、筛选一些特定元素等。
尽管这一特性在许多情况下非常有用，但它对于初学者来说并不是很容易理解。下面我们就详细了解一下它的用途、工作原理和代码实现。
什么是迭代器协议？
迭代器协议就是规定了一种允许对象通过有效的方式向其他对象进行计算机逐个访问元素的方法。
一般而言，实现迭代器协议就意味着该对象支持以下两种接口：
- 迭代器接口（Iterator）：返回一个迭代器对象，该对象能够通过 next() 方法逐个访问该对象的元素。
- 迭代接口（Iterable）：定义一个能够返回迭代器接口的方法。该方法应该返回一个包含迭代器接口的对象。
迭代器的工作原理
迭代器协议允许开发者为对象定义一种按预期进行迭代的标准方法。通过这种方式，不同类型的对象都可以按照一种统一的方法进行遍历。
迭代器对象基本上是一个具有 next() 方法的对象，next() 方法允许我们一次读取一个元素，直到最后一个元素被读取。当最后一个元素被读取时，迭代器将返回 undefined 并且迭代过程终止。
通过外部调用 next() 方法，我们可以把迭代器对象向前推进一步，并返回当前指针所指向的元素。通过迭代器协议提供的 next() 方法，我们可以处理集合中的每一个元素，并在需要时返回其他元素或控制迭代停止。
// 一个简单的迭代器类
class Iterator {
constructor(items) {
this.items = items;
this.index = 0;
}
next() {
return this.index < this.items.length
? { value: this.items[this.index++], done: false }
: { value: undefined, done: true };
}
}
const items = ['apple', 'banana', 'orange'];
const iterator = new Iterator(items);
console.log(iterator.next().value); // apple
console.log(iterator.next().value); // banana
console.log(iterator.next().value); // orange
console.log(iterator.next().done); // true迭代器在实际开发中的应用
迭代器查看所有系统内置对象
在 JavaScript 中，有许多内置对象如字符串、数组、Set 和 Map 等。通过迭代器协议，我们可以很容易查看这些对象中的元素。例如，迭代 Array 实例中的所有元素：
const numbers = [1, 2, 3, 4, 5]; const iterator = numbers[Symbol.iterator](); console.log(iterator.next().value); // 1 console.log(iterator.next().value); // 2 console.log(iterator.next().value); // 3 console.log(iterator.next().value); // 4 console.log(iterator.next().value); // 5 console.log(iterator.next().done); // true
迭代器遍历自定义对象
除了内置对象之外，我们还可以使用迭代器协议来迭代我们自己定义的对象。例如，我们可以通过迭代器协议遍历以下 Person 类：
class Person {
constructor(name) {
this.name = name;
this.friends = [];
}
addFriend(friend) {
this.friends.push(friend);
}
[Symbol.iterator]() {
let i = 0;
const friends = this.friends;
return {
next() {
if (i < friends.length) {
return { done: false, value: friends[i++] };
}
return { done: true };
},
};
}
}
const person = new Person('Johnny');
person.addFriend('Jane');
person.addFriend('Alex');
person.addFriend('Sara');
for (const friend of person) {
console.log(friend);
}总结
迭代器协议允许我们一次访问集合中的所有元素，并在需要时控制元素的数量和顺序。虽然它的概念比较抽象，在编写自己的迭代器时需要小心，但是它可以提供一个很好的抽象层，以处理数据集合的不同类型。它可以让我们更简洁，更清晰地定义代码，并在需要时更容易地修改代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b9e16cadd4f0e0ff26c053