Iterator(遍歷器)

ES6的一些語法乍一看會讓人覺得很懵,比如...arr怎么就能拿到每個元素了?解構賦值是怎么解構的?大致了解Iterator之后,就能對前面的問題有所頭緒了.

產生:

   除了數組和對象,ES6多了Map和Set兩種數據集合,這樣就需要一種統一的接口機制，來處理所有不同的數據結構。

作用:

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

 2.是使得數據結構的成員能夠按某種次序排列；

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

 

基本原理

  核心是一個指針對象,它有一個next方法,然后第一調用指向數據結構的第一個,之后每次調用就指向后面一個.

var it = makeIterator(['a', 'b']);

it.next() // { value: "a", done: false }
it.next() // { value: "b", done: false }
it.next() // { value: undefined, done: true }

function makeIterator(array) {
  var nextIndex = 0;
  return {
    next: function() {
      return nextIndex < array.length ?
        {value: array[nextIndex++], done: false} :
        {value: undefined, done: true};
    }
  };
}

next方法返回一個對象，表示當前數據成員的信息。這個對象具有value和done兩個屬性，value屬性返回當前位置的成員，done屬性是一個布爾值，表示遍歷是否結束，即是否還有必要再一次調用next方法。

 

默認Iterator接口

一種數據結構只要部署了 Iterator 接口，我們就稱這種數據結構是“可遍歷的”（iterable）。

ES6 規定，默認的 Iterator 接口部署在數據結構的Symbol.iterator屬性，或者說，一個數據結構只要具有Symbol.iterator屬性，就可以認為是“可遍歷的”

const obj = {
  [Symbol.iterator] : function () {
    return {
      next: function () {
        return {
          value: 1,
          done: true
        };
      }
    };
  }
};

 

原生具備 Iterator 接口的數據結構如下。並沒有Object對象,默認的遍歷器並不知道如何確定遍歷的屬性順序.

• Array
• Map
• Set
• String
• TypedArray
• 函數的 arguments 對象
• NodeList 對象

我們可以手動調用Symbol.iterator屬性來接入接口,實現遍歷,也可以用for of 自動接入.Object除外

let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();

iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }

 let arr = ['a', 'b', 'c'];
      
    for(let item of arr){
      console.log(item)
    }

 

如果Object對象也想通過for of來遍歷,是需要手動添加Iterator

Object.prototype[Symbol.iterator] = function() {
    let that = this
    let index = 0
    let arr = Object.keys(that)
    let length = Object.keys(that).length
    return {
        next:() => {
            let value = that[arr[index]]
            let done = (index >= length)
            index++
            return {value,done}
        }
    }

　　

契合場景

  1.拓展運算符

  2.解構賦值

  3.yield*

  4.其他一些參數是數組的情況　

• for...of
• Array.from()
• Map(), Set(), WeakMap(), WeakSet()（比如new Map([['a',1],['b',2]])）
• Promise.all()
• Promise.race()

這些情景下都會去接入Iterator,完成一些我們看不到的操作,從而拿到我們看到的那些值.