ES6_10、迭代器介绍

介绍

遍历器（Iterator）就是一种机制。它是一种接口(接口在js里面就是对象的属性)，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。
作用：自定义遍历数据。

1) ES6 创造了一种新的遍历命令 for...of 循环，Iterator 接口主要供 for...of 消费。

如：

2) 原生具备 iterator 接口的数据(可用 for of 遍历)：

Array、Arguments、Set、Map、String、TypedArray、NodeList。
如：一个数组里的原型里就能找到这个接口，里面是一个对象。

3) 工作原理

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

如下图：array对象里有Symbol的属性Symbol.iterator作为属性，而这个属性的值是一个函数，所以可以调用这个属性创建一个对象。

练习

自定义遍历方式来遍历这个对象里的students属性的值。

        const banji={
            name:"终极一班",
            students:["小张","小明","小李"],

            //根据iterator实现原理，要想实现遍历，就要实现iterator接口，iterator接口的工作流程：

            //1，创建指针对象(让这个对象有iterator属性)

            [Symbol.iterator](){

                let index=0;//索引

                let _this=this;//对象banji本身

                //2，这个对象要返回object对象
                return {

                    //3，这个对象里会有一个next()方法(属性)
                    next:function(){

                        //4，next会返回一个含有value和done属性的额对象。done属性的值为布尔值，用来表示是否遍历到底了。

                        //判断是否遍历完
                       if(index<_this.students.length){              
                             const obj={ value:_this.students[index], done:false };
                             index++;          
                             return obj;

                       }else{
                        return { value:undefined, done:true };
                       }

                    }
                }
            }

        };

这样就可以直接遍历了

for (let val of banji) {
            console.log(val);
        }