ES6--iterator接口机制

系统管理员 2022-12-06 05:23 93阅读 0赞

iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制  
1.为各种数据结构提供统一便捷的访问接口  
2.使得数据结构的成员能够按某种次序排列  
3.ES6创造了一种新的遍历命令，for…of循环，Iterator接口主要供for…of消费  
工作原理：  
1.创建一个指针对象（遍历器对象），指向数据结构的起始位置，  
2.第一次调用next方法，指针自动指向数据结构的第一个成员  
3.接下来不断调用next方法，指针会一直向后移动，直到指向最后一个成员  
4.每调用next方法返回的是一个包含value和done的对象，\{value:当前成员的值，done：布尔值\}  
–value表示当前成员的值，done对应的布尔值表示当前的数据结构是否遍历结束  
–当遍历结束的时候返回value值是undefined,done的值为false  
原生具备iterator接口的数据（可用for of遍历）  
扩展理解  
1.当数据结构上部署了Symbol.iterator接口，该数据就可用for of遍历  
2.当使用for of 去遍历目标数据的时候，该数据会自动去找Symbol.iterator属性  
1)Array  
2)arguments  
3)set容器  
4）get容器  
5）String  
例：

//模拟指针对象（遍历器对象）原理
            function myIterator(arr){
                let index = 0;
                return  {//遍历器对象
                    next:function(){
                         return  (index<arr.length)?{value:arr[index++],done:false} :{value:undefined,done:true};
                        
                    }
    
                }
            }
            let arr=[1,4,65,'abc'];
            let iteratorObj = myIterator(arr);
            console.log(iteratorObj.next());
            console.log(iteratorObj.next());
            console.log(iteratorObj.next());
            console.log(iteratorObj.next());
           console.log(iteratorObj.next());
           //将iterator接口将数据部署到指定的数据类型上，可以使用for of遍历（上面5种）
           for(let i of arr){
               console.log(i);
           }
           let str = "abcd";
           for(let i of str){
               console.log(i);
           }
           function fun(){
               for(let i of arguments){
                   console.log(i);
               }
           }
           fun(1,3,"wts");
           //对象不能使用  for of
           //等同于在指定数据结构上部署了iterator接口，当使用for of去遍历某一个
           //数据结构时，先找Symbol.iterator,找到了就去遍历，没找到就不能遍历
           let  targetData = {
               [Symbol.iterator]:function(){
                let index = 0;
                return  {//遍历器对象
                    next:function(){
                         return  (index<this.length)?{value:this[index++],done:false} :{value:undefined,done:true};
                        
                    }
    
                }
               }
           }
           //使用三点运算符，解构赋值，默认去调用iterator接口
           let arr2 = [1,6];
           let arr3 = [2,3,4,5];
           arr2=[1,...arr3,6];
           let [a,b]=arr2;
           console.log(a,b);