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

什么是迭代器?

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

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

工作原理

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

原生具备iterator接口的数据

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

如何使用迭代器?

在 JavaScript 中,我们可以通过 Symbol.iterator 方法来获取一个集合的迭代器。然后,我们可以使用 next() 方法来遍历集合中的元素。next() 方法会返回一个对象,其中包含两个属性:value 和 done。value 表示当前遍历到的元素,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 循环遍历。希望这个教程对你有所帮助!

相关推荐
小码哥_常1 小时前
一套自己部署的 IM,客户端是同一份 Flutter
前端·后端
蜗牛攻城狮3 小时前
微前端四大方案选型对比与最佳实践:qiankun、micro-app、wujie、Module Federation
前端·微前端·qiankun·前端架构·micro-app·wujie
sbjdhjd4 小时前
网工进阶笔记:H3CSE 园区网全栈技术与协议汇总
网络·笔记·云计算·ssh·网络工程·vlan·aaa
她说可以呀4 小时前
Vue插槽
前端·javascript·vue.js
qq_448011165 小时前
Vue + Jinja2两套模版与法冲突造成undefinedError
前端·javascript·vue.js
aixingpan5 小时前
aixingpan.cn API开发文档:前端查询夏令时和时区接口指南
前端·php
2601_958352905 小时前
23.5×19mm 换掉一整条音频链?|A-68 集成了什么:ADC / DAC / 24.576MHz 时钟 / AEC / 波束降噪,主控仅需 6 根线
前端·音视频·ai降噪·回声消除·语音模块
志尊宝6 小时前
AI原生前端开发(039):AI辅助的Nuxt 4全栈开发
前端·vue.js·ai-native
FRing037 小时前
JavaScript入门到精通三十二(深拷贝、浅拷贝、递归函数)
开发语言·前端·javascript
海绵宝宝的月光宝盒7 小时前
14-AutoCAD-阵列命令应用与案例实战(AR)
经验分享·笔记·自动化·课程设计·制造·学习方法·cad