理解 es6 的 Iterator

爲什麼要增加一個 Iterator 接口？

對於 Set、Map、Array、String 等數據結構，我們希望有一種統一的方式可以遍歷其中的元素。

es6 給所有可以 遍歷 的數據結構賦予了一個統一的遍歷方法 for...of。於是可以這樣:

const arr = ['hello', 'world']
for (let itm of arr) {
    console.log(itm)
}

// string
const str = 'hello world'
for (let s of str) {
    console.log(s)
}

而 for...of 這種方式，實際上就隱式調用了 Iterator 的方法。

Iterator 有什麼特性？

• 遍歷器具有 next 方法，它返回一個對象，反映 當前元素 和 當前狀態

  iterator.next() // { value: current_element, done: false }

  在 for...of 這種遍歷方式裏，實際就是通過不斷調 iterator.next() 並判斷 !done 來結束循環的。

• 一個數據結構，只要它具有 Symbol.iterator 屬性，就可用 for...of 遍歷。

  • Symbol.iterator　實際是一個遍歷器生成函數，在 for...of 中被自動調用

  const arr = ['hello', 'world', 'jupiter']
  const iter = arr[Symbol.iterator]() // 得到一個遍歷器
  
  ｉｔｅｒ.next() // { value: 'hello', done: false }
  ｉｔｅｒ.next() // { value: 'world', done: false }
  ｉｔｅｒ.next() // { value: 'jupiter', done: false }
  ｉｔｅｒ.next() // { value: undefined, done: false }
  

  • 自定義的數據結構，可賦予 Symbol.iterator 屬性，這樣就可用 for...of 遍歷它

  const obj = {
      [Symbol.iterator] () {
          return this
      },
      value: 12,
      done: false,
      next () {
          this.value++
          if (this.value > 15) {
             this.done = true
          } 
          return { value: this.value, done: this.done }
      }
  }
  
  for (let itm of obj) {
      console.log(itm) // 13 14 15
  }

  下面再來定義一種新的數據結構：Fibonacci，給它賦予 Symbol.iterator屬性，以便用　for...of　遍歷:

  class Fibonacci {
      constructor (number = 2) {
          this.n1 = 0
          this.n2 = 1
          this.number = number
          this.current = 0
      }
  
      [Symbol.iterator] () {
          return this
      }
  
      next () {
          [this.n1, this.n2] = [this.n2, this.n1 + this.n2]
          let done 
          this.current++ 
  
          if (this.current > this.number) {
              done = true
          } else {
              done = false
          }
  
          return { value: this.n1, done }
      }
  }

  用 new Fibonacci(10) 生成一個包含 fibonacci 數列前 10 項的數列:

  const iter = new Fib(10)
  
  for (let itm of iter) {
      console.log(itm) // 1 1 2 3 5 8 13 21 34 55
  }

哪些地方用到了 Iterator？

• for...of
• 解構賦值

    let set = new Set().add('a').add('b').add('c')
    let [x, y] = set // a b

• 擴展運算符 ...

[...'hello'] // ["h", "e", "l", "l", "o"]
// 沒錯，這個結果和 'hello'.split('') 的效果是一樣的

• generator

const gen = function* () {
    yield 'hello'
    yield 'world'
}

const gener = gen() // 得到了一個遍歷器（在 generator 概念中叫 生成器）

for (let i of gener) {
    console.log(i)
}

還有其他的場合也用到了 Iterator，具體可參考阮一峯老師的《ES6 標準入門》