深入淺出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);

結尾

迭代器協議雖然一般用的比較少，但是了解其原理是非常有必要的，這樣才可以才需要的實現定義自己的迭代器來遍歷對象。