JS的ES6的iterator

一.iterator

1.概念：iterator是一種接口機制，為各種不同的數據結構提供統一的訪問機制。

2.作用：

• 為各種數據結構，提供一個統一的、簡便的訪問接口；

• 使得數據結構的成員能夠按某種次序排列。

• ES6創造了一種新的遍歷命令for...of循環，Iterator接口主要供for...of消費。

3.工作原理：

1. 創建一個指針對象，指向數據結構的起始位置。

2. 第一次調用next方法，指針自動指向數據結構的第一個成員

3. 接下來不斷調用next方法，指針會一直往后移動，直到指向最后一個成員

4. 每調用next方法返回的是一個包含value和done的對象，{value: 當前成員的值,done: 布爾值}

   • value表示當前成員的值，done對應的布爾值表示當前的數據的結構是否遍歷結束。

   • 當遍歷結束的時候返回的value值是undefined，done值為false

4.原生具備iterator接口的數據(可用for of遍歷)

• Array

• arguments

• set容器

• map容器

• String

• ......

    let arr = [1,2,3];

    for (let i of arr) {
      console.log(i);
      
    }

    let obj = {
      name: 'obj1'
    }

    console.log(arr);    //array擁有了iterator接口
    console.log(...arr); //三點運算符用的也是iterator接口
    console.log(obj);

    for (let i of obj) {
      console.log(i);     //object對象沒有iterator接口
      
    }

5.模擬實現iterator接口

    //模擬實現iterator接口
    function iteratorUtil(target) {
      let index = 0;    //用來表示指針其實位置
      return {          //返回指針對象
        next() {        //指針對象的next方法
          return index < target.length ? {
            value: target[index++],
            done: false
          } : {
            value: target[index++],
            done: true
          };
        }
      }
    }

    //生成一個迭代器對象
    let arr = [1,2,3];
    let iteratorObj = iteratorUtil(arr);
    console.log(iteratorObj.next().value);
    console.log(iteratorObj.next().value);
    console.log(iteratorObj.next().value);
    console.log(iteratorObj.next().value);

6.實現Object對象的遍歷

let arr = [1,2,3,4];

    var obj = {name: 'kobe', age: 40};
    //    console.log(obj[Symbol.iterator]); // undefined
    //    console.log(arr[Symbol.iterator]); // function

    function mockIterator() {

      let that = this;

      let index = 0;
      let length = 0;
      debugger
      if(that instanceof Array){
        length = that.length;
        return {
          next: function () {
            return index < length ?{value: that[index++], done: false}: {value: that[index++], done: true}
          }
        }
      }else {
        length = Object.keys(that).length
        let keys = Object.keys(that);
        return {
          next: function () {
            return index < length ?{value: that[keys[index++]], done: false}: {value: that[keys[index++]], done: true}
          }
        }
      }

    }

  

    Array.prototype[Symbol.iterator] = mockIterator;
    Object.prototype[Symbol.iterator] = mockIterator;

    for(let i of arr){
      console.log(i);
    }
    for(let i of obj){
      console.log(i);
    }