深刻淺出ES6的迭代器

迭代器是ES2015中新增的規範，與之相關的for...of也是ES2015新增的。

本文來深刻研究一下迭代器是什麼，以及迭代器可以幹什麼？

或許你對for ... of的執行還不瞭解，好比什麼狀況下可使用for ... of去遍歷對象，什麼狀況下會報錯等等，這篇文章應該能幫到你。

迭代器協議

for ... of只能迭代知足【迭代器協議】的對象

可迭代對象的必須存在[Symbol.iterator]方法，該方法一個無參函數，返回迭代器協議的對象。

迭代器對象包含一個next()函數，該函數返回值有兩種:

• 若是迭代未結束，返回以下

  return {
    value: 'item', // item是本次迭代值，能夠爲任意對象
    done: false
  }

• 若是迭代已結束，返回以下

  return {
    done: true
  }

下面是未提供迭代器的示例。

const obj = {
  name: 'xialei',
  id: 1
};
for(let item of obj) { // TypeError: obj is not iterable
  
}

下面是提供迭代器的示例。

const obj = {
    name: 'xialei',
    id: 1,
    [Symbol.iterator]: function () { // 迭代器屬性
        const keys = Object.keys(this); // 讀取對象鍵列表
        let keyIndex = 0; // 遍歷未知
        const self = this; // 保存this，next中的function會有本身的this
        return { // 返回帶有next()的對象
            next: function () {
                if (keyIndex < keys.length) { // 防止越界
                    const key = keys[keyIndex];
                    keyIndex++; // 移動到下一個位置
                    return {
                        value: [key, self[key]], // 鍵值對數組
                        done: false
                    }
                }
                return { // 遍歷結束
                    done: true
                }
            }
        }
    }
};

經過給obj提供迭代器方法讓obj也可使用for...of遍歷。

直接去理解迭代器概念比較困難，用一個簡單的例子去簡化理解是一件很容易的事情。

其餘可迭代對象

String,Array,Map,Set,TypedArray是全部內置的可迭代對象，他們的原型對象都有一個[Symbol.iterator]方法。

下面是兩種方法迭代String對象的示例。

// for ... of
const str = 'xialei';
for(const char of str) {
  console.log(char);
}
// iterator
const str = 'xialei';
const iterator = str[Symbol.iterator](); // 返回一個{next:方法}對象
let obj = null;
do {
    obj = iterator.next(); // 返回的是對象，{value:任意對象,done:布爾型}
    console.log(obj.value);
}while(!obj.done);

結尾

迭代器協議雖然通常用的比較少，可是瞭解其原理是很是有必要的，這樣才能夠才須要的實現定義本身的迭代器來遍歷對象。

更多原創文章，盡在天天進步一點點