【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属性的对象
   注: 需要自定义遍历数据的时候，要想到迭代器。

数组迭代

    <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>

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

    <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>