ES6新特性之Iterator

1：基本概念

Iterator 迭代器是一種接口，爲不一樣的數據結構提供統一的訪問機制，這個訪問機制主要是遍歷，咱們知道，在數組、在對象、在類數組、在map、在set裏面，均可以用for of或者擴展運算符來獲得一個數組或者是遍歷當前的數據結構，爲何可以遍歷的緣由就是由於存在這個Iterator 迭代器這個東西，因此咱們能夠用for of來提供一個統一的遍歷，所以這個底層或者是Itrator它最初是爲了for of而設計的。

爲了給全部的數據結構有一個統一的遍歷接口，統一的訪問機制，所以就產生了迭代器。

迭代器的特色：

• 按某種次序排列數據結構
• 爲for of提供一個遍歷支持
• 爲不一樣的數據結構提供統一的訪問機制（目的）

遍歷過程：要遍歷一個對象，Iterator要新建一個指針，指向數據結構的起始位置；而後調用next()方法，返回以下對象：

{
        /* 當前位置數據值 */
        value: 'value',
        /* 是否遍歷完成標識 */
        done: false,
    }
    {
        value: undefined,
        done: true,
    }

默認部署在數據結構Symbol.iterator屬性上：爲了提供一個統一的訪問，防止篡改。

let array = ['a', 'b', 'c', 'd'];
    
    let Iterator = array[Symbol.iterator]();
    
    /*
    Iterator.next()
    { value: "a", done: false }
    Iterator.next()
    { value: "b", done: false }
    Iterator.next()
    { value: "c", done: false }
    Iterator.next()
    { value: "d", done: false }
    Iterator.next()
    { value: undefined, done: true }
    Iterator.next()
    { value: undefined, done: true }
    */

默認包含迭代器對象

• Array
• Map
• Set
• String
• arguments
• NodeList

2：應用場景

• for......of
• 結構賦值

  let set = new Set().add('aa').add('bb');
    let [a, b] = set;
  
    //
    a: 'aa'
    b: 'bb'

• 擴展運算符
• generator函數

  let generator = function* () {
      yield 1;
      yield 2;
      yield 3;
      yield 4;
      yield 5;
    };
  
    let iterator = generator();
  
    //
    iterator.next();
    { value: 1, done: false }
    iterator.next()
    { value: 2, done: false }
    iterator.next()
    { value: 3, done: false }
    iterator.next()
    { value: 4, done: false }
    iterator.next()
    { value: 5, done: false }
    iterator.next()
    { value: undefined, done: true }
    iterator.next()
    { value: undefined, done: true }

3：數組遍歷

• 遍歷器覆蓋

  const array = ['a', 'b', 'c'];
    for(let s of array) {
      console.log(s);
    }
  
    //
    a
    b
    c
  
    const array = ['a', 'b', 'c'];
    const object = {};
    object[Symbol.iterator] = () => {
      return array[Symbol.iterator].call(array);
    }
    for(let s of object) {
      console.log(s);
    }
    //
    a
    b
    c

• 獲取鍵值與鍵名

  const array = ['a', 'b', 'c'];
    // for  of 等到的是value
    for(let s of array) {
      console.log(s);
    }
    //
    a
    b
    c
  
    // for  in等到的是key
    for(let s in array) {
      console.log(s);
    }
    //
    0
    1
    2