【ES】笔记-迭代器

迭代器概念

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

  1. ES6 创造了一种新的遍历命令for...of循环,Iterator接口主要供for...of消费
  2. 原生具备iterator接口的数据(可用for of 遍历)
    a) Array
    b) Arguments
    c) Set
    d) Map
    e) String
    f) TypedArray
    g) NodeList
  3. 工作原理
    a) 创建一个指针对象,指向当前数据结构的起始位置
    b) 第一次调用对象的next方法,指针自动指向数据结构的第一个成员
    c) 接下来不断调用next方法,指针一直往后移动,直到指向最后一个成员
    d) 每调用next方法返回一个包含value和done属性的对象
    注: 需要自定义遍历数据的时候,要想到迭代器。

数组迭代

javascript 复制代码
    <script>
        //声明一个数组
        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());

    </script>

非原生数据对象的自定义实现

javascript 复制代码
    <script>
        //声明一个对象
        const banji = {
            name: "终极一班",
            stus: [
                'xiaoming',
                'xiaoning',
                'xiaotian',
                'knight'
            ],
            [Symbol.iterator]() {
                //索引变量
                let index = 0;
                // 保存this
                let _this = this;
                return {
                    next: function () {  //也可以采用箭头函数,就不需要外层保存this
                        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);
        }
    </script>
相关推荐
一点.点1 小时前
李沐动手深度学习(pycharm中运行笔记)——04.数据操作
pytorch·笔记·python·深度学习·pycharm·动手深度学习
我的golang之路果然有问题3 小时前
案例速成GO+redis 个人笔记
经验分享·redis·笔记·后端·学习·golang·go
韩明君4 小时前
前端学习笔记(四)自定义组件控制自己的css
前端·笔记·学习
灏瀚星空5 小时前
从基础到实战的量化交易全流程学习:1.1 量化交易本质与行业生态
人工智能·笔记·学习·数学建模·信息可视化
Jumbuck_106 小时前
基于OpenMV+STM32+OLED与YOLOv11+PaddleOCR的嵌入式车牌识别系统开发笔记
笔记·stm32·嵌入式硬件
努力做小白6 小时前
Linux扩展
linux·c语言·笔记
pedestrian_h6 小时前
gin框架学习笔记
笔记·学习·go·web·gin
豆沙沙包?6 小时前
7.学习笔记-Maven进阶(P75-P89)-进度(p75-P80)
笔记·学习·maven
一点.点6 小时前
李沐动手深度学习(pycharm中运行笔记)——05.线性代数
pytorch·笔记·python·深度学习·pycharm·动手深度学习
Lester_11017 小时前
嵌入式学习笔记 - HAL_xxx_MspInit(xxx);函数
笔记·学习