title: es6基礎(chǔ)知識(shí)3（迭代）
tags:

• 迭代
  categories:
• 前端

1. 迭代器

es6中新增了迭代器，迭代器是一種特殊的對(duì)象，它具有專門為迭代過程設(shè)計(jì)的接口。迭代器根據(jù)迭代協(xié)議來設(shè)計(jì)，每一個(gè)迭代器都包含了一個(gè)next()方法，在這個(gè)方法中給出了每一次的返回值value以及迭代時(shí)候完成的標(biāo)記done。

與迭代器對(duì)應(yīng)的叫迭代對(duì)象，迭代對(duì)象指的就是可以被迭代的對(duì)象，也就是具有迭代器的對(duì)象，在es6中具體就指包含Symbol.iterator方法的對(duì)象。

迭代語句有兩種，for...in和for...of，這兩者的區(qū)別在于for...in以原始插入的順序迭代對(duì)象的可枚舉屬性，for...of根據(jù)迭代對(duì)象的迭代器具體實(shí)現(xiàn)迭代對(duì)象數(shù)據(jù).

舉一個(gè)簡(jiǎn)單的例子：

var arr = ['a', 'b' ,'c'];

for (var attr in arr) {
    console.log(attr, arr[attr]);
}// 0 a
 // 1 b
 // 2 c


for (var attr of arr) {
    console.log(attr);
}// a
 // b
 // c

這里要注意for...in和for...of的差異，for...in迭代的值書數(shù)組的索引，for...of迭代的值是數(shù)據(jù)每一想的值。

數(shù)組arr能夠進(jìn)行迭代，或者說能夠使用for...in和for...of的原因在于，數(shù)組對(duì)象自身帶有了迭代器方法。

[圖片上傳失敗...(image-7c2a6e-1561387452654)]

這里的symbol屬性正是屬性私有化的應(yīng)用

如果隨意在一個(gè)對(duì)象上使用for...in或者for...of,這個(gè)對(duì)象沒有迭代器的話，就會(huì)報(bào)錯(cuò)：

var obj = {
    left: 100;
    top: 200;
}

for( var k of obj) {
    console.log(k);
}

對(duì)象沒有迭代器

此時(shí)控制臺(tái)顯示對(duì)象是不可迭代的，原因就在于對(duì)象obj沒有實(shí)現(xiàn)迭代器方法

迭代器依據(jù)迭代協(xié)議來實(shí)現(xiàn)，可以為obj對(duì)象創(chuàng)建一個(gè)迭代器，從而把obj對(duì)象轉(zhuǎn)化為可迭代對(duì)象，具體的寫法:

var obj = {
    left: 100,
    top: 200
};

// 迭代協(xié)議
obj[Symbol.iterator] = function() {
    let keys = Object.keys(obj);    //['left','top']
    let len = keys.length;
    let n = 0;


    return {
        next: function() {//迭代器的關(guān)鍵于next函數(shù)


            if (n < len) {
                return {
                    value: {k: keys[n], v: obj[keys[n++]]},
                    done: false
                }
            } else {
                return {
                    done: true
                }
            }

        }
    }
}

// 通過給原對(duì)象增添一個(gè)迭代器函數(shù)從而將一個(gè)普通對(duì)象轉(zhuǎn)變?yōu)榱丝傻鷮?duì)象

for (var {k, v} of obj) { //of 是一個(gè)可迭代的對(duì)象
    console.log(k, v);// left 100
                      // top 200

}