ES6-for...of循环和遍历器

小灰灰 2023-06-04 12:57 4阅读 0赞

for…of 是ES6中新增的一种用于遍历数据结构的方法，for…of能够遍历的数据结构必须是提供了iterator接口的，在前面的例子中我们用for of遍历过数组，通过数组我们看一下iterator接口  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]  
Array的原型中有个属性Symbol.iterator,Symbol.iterator属性本身是一个函数，执行这个函数，返回一个遍历器对象。

console.dir([1,2,3].values());              //Array Iterator {}
    console.dir([1,2,3][Symbol.iterator]);    //values() { [native code] }
    console.dir([1,2,3][Symbol.iterator]());  //Array Iterator {}

和数组类似，一个数据结构只要有Symbol.Iterator属性，就是具备Iterator接口的数据结构，就可以用for of遍历。  
ES6中原生具备Iterator接口的数据结构如下：

*  Array
 *  Set
 *  Map
 *  String
 *  某些类数组对象

//Array
      let arr=[1,2,3];
      console.dir(arr[Symbol.iterator]());  //Array Iterator
      for(let v of arr){ 
        console.log(v);
      }
      //Set
      let set=new Set([1,2,3]);
      console.dir(set[Symbol.iterator]()); //SetIterator
      for(let v of set){ 
        console.log(v);
      }
      //Map
      let map=new Map([['id', 1], ['ename', 'lily']]);
      console.dir(map[Symbol.iterator]());  //MapIterator
      for(let v of map){ 
        console.log(v);
      }
      //String
      let str='123';
      console.dir(str[Symbol.iterator]());  //StringIterator
      for(let v of str){ 
        console.log(v);
      }
    
      //类数组对象 HTMLCollection
      let plist=document.getElementsByTagName('p');
      console.dir(plist[Symbol.iterator]());  //Array Iterator
      for(let v of plist){ 
        console.log(v);
      }
      //类数组对象Arguments
      (function f(){ 
        console.dir(arguments[Symbol.iterator]());  //Array Iterator
        for(let v of arguments){ 
          console.log(v);
        }
      })('a','b','c');

不具备Iterator接口的数据结构，使用for of遍历会报错

let obj={ 
        a:1,
        b:2,
        c:3
      };
      for(let v of obj){ 
        console.log(v);  //Uncaught TypeError: obj is not iterable
      }

## Iterator（遍历器） ##

遍历器提供了一个指针，指向当前对象的某个属性，使用next方法，就可以将指针移动到下一个属性。

let arr=[1,2,3];
    console.dir(arr[Symbol.iterator]());  //Array Iterator

![在这里插入图片描述][20191008114711533.png]  
next方法返回一个包含value和done两个属性的对象。value属性是当前遍历位置的值，done属性是一个布尔值，表示遍历是否结束。

可以自己给对象部署Iterator接口

et obj={ 
        a:1,
        x:2,
        c:3
      };
      obj[Symbol.iterator]=function () { 
        let keys = Object.keys(obj);
        let index = 0;
        return { 
          next() { 
            if(index<keys.length){ 
              return { value:obj[keys[index++]],done:false}
            }else{ 
              return { value:undefined,done:true};
            }
          }
        }
      };
      for(let v of obj){ 
        console.log(v);  //可以遍历出1,2，3
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: /images/20230601/1cbb1dbb1ac146d4b269d29c211a8cdb.png
[20191008114711533.png]: /images/20230601/7f1ee077a7e94b9398654b76d01695f5.png