当前位置：首页 > news >正文

【ES6复习笔记】迭代器（10）

news 2025/6/28 16:41:07

什么是迭代器？

迭代器（Iterator）是一种对象，它能够遍历并访问一个集合中的元素。在 JavaScript 中，迭代器提供了一种统一的方式来处理各种集合，如数组、字符串、Map、Set 等。通过迭代器，我们可以按顺序访问集合中的元素，而不需要关心集合的内部结构。

更简单一点说，遍历器（Iterator）是一种机制，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。

工作原理

创建一个指针对象，指向当前数据结构的起始位置。
第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员。
接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员。
每调用 next 方法返回一个包含 value 和 done 属性的对象。

原生具备iterator接口的数据

Array
Arguments
Set
Map
String
TypedArray
NodeList

如何使用迭代器？

在 JavaScript 中，我们可以通过 Symbol.iterator 方法来获取一个集合的迭代器。然后，我们可以使用 next() 方法来遍历集合中的元素。next() 方法会返回一个对象，其中包含两个属性：value 和 done。value 表示当前遍历到的元素，done 表示是否已经遍历完所有元素。

示例代码

下面是一个使用迭代器遍历数组的示例代码：

// 声明一个数组
const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];// 使用 for...of 遍历数组
for (let v of xiyou) {console.log(v);
}// 获取数组的迭代器
let iterator = xiyou[Symbol.iterator]();// 调用对象的 next 方法
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

在这个示例中，我们首先使用 for...of 循环遍历了数组 xiyou。然后，我们获取了数组的迭代器，并使用 next() 方法遍历了数组中的元素。

自定义迭代器

除了使用内置的迭代器，我们还可以自定义迭代器。例如，我们可以为一个对象定义一个迭代器，使得这个对象可以被 for...of 循环遍历。

下面是一个自定义迭代器的示例代码：

// 声明一个对象
const banji = {name: "终极一班",stus: ['xiaoming','xiaoning','xiaotian','knight'],[Symbol.iterator]() {// 索引变量let index = 0;//let _this = this;return {next: function () {if (index < _this.stus.length) {const result = { value: _this.stus[index], done: false };// 下标自增index++;// 返回结果return result;} else {return { value: undefined, done: true };}}};}
};// 遍历这个对象
for (let v of banji) {console.log(v);
}