前端Iterator

iterator 迭代器

iterator概念

迭代器是种接口，是一种机制，为各种不同的数据接口提供统一的访问机制，任何数据只要部署了iterator接口，就可以完成遍历操作（依次处理该数据接口的所有成员）

作用：

1. 为各种数据结构提供一个统一的简便的访问接口
2. 使得数据结构的成员 可以按某种次序进行排序
3. 主要供 for…of 消费
4. 解构赋值和扩展运算符(…)的原理也是迭代器

iterator本质上就是一个指针对象

过程是这样的：

（1）创建一个指针对象，指向当前数据结构的起始位置。

（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。

（3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

（4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。
原身具备iterator接口的

一般来说我们解除的迭代器 就是 string， 数组，map，set，类数组(arguments ，nodeList）

为什么说主要供for…of消费？省去手动next()的麻烦，遍历的变量可满足语义化，可以中断遍历，可迭代的数据结构均可使用for…of

1. 新增了keys(),values(),entries() 方法

    let arr = ['java','javascript','c','c++']
        
        for (let val of arr) {
            console.log( val )       //依次输出值
        }
        //values()
        for (let val of arr.values()) {
            console.log( val )       //依次输出值
        }
        // keys()
        for (let  val of arr.keys()) {
            console.log( val )      //依次输出所有的数组下表
        }
        //entries()
        for (let [index,item] of arr.entries()) {
            console.log( index )    //依次输出数组下表
            console.log( item )     //依次输出值
        }
   

   for…of 与传统循环取值对比

   //与传统的循环对比
   for (let i = 0; i < arr.length; i++) {
       console.log( arr[i])           // java,javascript,c,c++
        缺点：不够直观，没有直接操作元素；用来遍历变量不好管理，可能有多个，ijk等等
   }
   for (let val in arr) {
       console.log( val )     //依次输出数组下标值
       console.log( arr[val] )     //会把不是索引对应值也遍历出来
   }
   
   arr.forEach((index,item)=>{
       console.log( index )
       console.log( item )
       // 直接操作元素，但不能提前停止遍历,提前break报错：Illegal break statement
   })
   

使用迭代器遍历优点优点：直接操作元素；并且只输出有索引的值；当执行next()时，才向下遍历一项