【ES6复习笔记】迭代器(10)

什么是迭代器?

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

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

工作原理

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

原生具备iterator接口的数据

  • Array
  • Arguments
  • Set
  • Map
  • String
  • TypedArray
  • NodeList

如何使用迭代器?

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

示例代码

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

javascript 复制代码
// 声明一个数组
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 循环遍历。

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

javascript 复制代码
// 声明一个对象
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);
}

在这个示例中,我们为对象 banji 定义了一个迭代器。这个迭代器使用一个索引变量 index 来跟踪当前遍历的位置,并通过 next() 方法返回下一个元素。这样,我们就可以使用 for...of 循环来遍历对象 banji 中的 stus 数组了。

总结

迭代器是一种强大的工具,它允许我们以统一的方式遍历各种集合。通过自定义迭代器,我们可以使对象也能够被 for...of 循环遍历。希望这个教程对你有所帮助!

相关推荐
天人合一peng31 分钟前
Unity中button 和toggle监听事件函数有无参数
前端·unity·游戏引擎
深蓝海拓1 小时前
PySide6从0开始学习的笔记(二十六) 重写Qt窗口对象的事件(QEvent)处理方法
笔记·python·qt·学习·pyqt
中屹指纹浏览器1 小时前
中屹指纹浏览器多场景技术适配与接口封装实践
经验分享·笔记
方也_arkling1 小时前
别名路径联想提示。@/统一文件路径的配置
前端·javascript
毕设源码-朱学姐1 小时前
【开题答辩全过程】以 基于web教师继续教育系统的设计与实现为例,包含答辩的问题和答案
前端
web打印社区2 小时前
web-print-pdf:突破浏览器限制,实现专业级Web静默打印
前端·javascript·vue.js·electron·html
RFCEO2 小时前
前端编程 课程十三、:CSS核心基础1:CSS选择器
前端·css·css基础选择器详细教程·css类选择器使用方法·css类选择器命名规范·css后代选择器·精准选中嵌套元素
Amumu121382 小时前
Vuex介绍
前端·javascript·vue.js
We་ct2 小时前
LeetCode 54. 螺旋矩阵:两种解法吃透顺时针遍历逻辑
前端·算法·leetcode·矩阵·typescript
BugShare3 小时前
Obsidian 使用指南:从零开始搭建你的个人知识库
笔记·obsidian