es6 Iterator接口和for-of

iterator接口

• 簡介：
  • Iterator 接口的目的，就是爲全部數據結構，提供了一種統一的訪問機制，即for...of循環（詳見下文）。當使用for...of循環遍歷某種數據結構時，該循環會自動去尋找 Iterator 接口。
• iterator接口遍歷過程
  1. 建立一個指針對象，指向當前數據結構的起始位置。也就是說，遍歷器對象本質上，就是一個指針對象。
  2. 第一次調用指針對象的next方法，能夠將指針指向數據結構的第一個成員。
  3. 第二次調用指針對象的next方法，指針就指向數據結構的第二個成員。
  4. 不斷調用指針對象的next方法，直到它指向數據結構的結束位置。
• 凡是具備Symbol.iterator屬性的數據就具有for-of遍歷的功能
  • Symbol.iterator自己是一個函數，該函數返回一個具備next方法的對象(簡稱遍歷對象)，next方法則是返回一個獲取下一個成員的信息
  • 遍歷對象除了有next方法，還能夠部署return和throw方法
    • return方法的使用場合是，若是for...of循環提早退出（一般是由於出錯，或者有break語句），就會調用return方法。若是一個對象在完成遍歷前，須要清理或釋放資源，就能夠部署return方法。
    • throw方法主要是配合 Generator 函數使用，通常的遍歷器對象用不到這個方法
    • 下面見例子
      • 例子一：

      next:()=>({
      value:value,//返回下一個成員的值
      done:false // 判斷是否遍歷到結尾了
      })

      • 例子二：

      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};
          }
        };
      }

      • 例子三：

      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 }

• 原生具有Iterator接口的數據類型有：
  • Array
  • Map
  • Set
  • String
  • TypedArray
  • 函數的 arguments 對象
  • NodeList 對象

---

for-of

• 一個數據結構只要部署了Symbol.iterator屬性，就被視爲具備 iterator 接口，就能夠用for...of循環遍歷它的成員。 也就是說，for...of循環內部調用的是數據結構的Symbol.iterator方法。
• forEach遍歷沒法經過break命令或return命令跳出循環，除非拋出錯誤
• for-of能夠和break、continue和return配合使用，且簡潔