迭代器是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遍歷。

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

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

其他可迭代物件

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

結尾

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