摘要：本質(zhì)上，遍歷器是一種線性處理，對(duì)于任何非線性的數(shù)據(jù)結(jié)構(gòu)，部署遍歷器接口，就等于部署一種線性轉(zhuǎn)換。不過，嚴(yán)格地說，對(duì)象部署遍歷器接口并不是很必要，因?yàn)檫@時(shí)對(duì)象實(shí)際上被當(dāng)作結(jié)構(gòu)使用，沒有結(jié)構(gòu)，而原生提供了。

經(jīng)?？吹?b>迭代這個(gè)詞，那么歸總下吧~

什么是可迭代對(duì)象：

一個(gè)對(duì)象（或它的原型鏈上的某個(gè)對(duì)象）必須有一個(gè)名字是 Symbol.iterator的屬性

String Array Map Set 是內(nèi)置可迭代的對(duì)象，因?yàn)樗鼈兊脑蛯?duì)象都有一個(gè) @@iterator 方法

Object 不是

接收可迭代對(duì)象的API

數(shù)組的遍歷 會(huì)調(diào)用迭代器接口，所以使用到數(shù)組作為參數(shù)的場(chǎng)合，都使用了遍歷器

Map([iterable]) WeakMap([iterable])

Set([iterable]) WeakSet([iterable])

Promise.all([iterable]) Promise.race([iterable])

Array.from([iterable])

for...in for...of

getOwnPropertyNames

不能用 for...in 來迭代 Set, 因?yàn)?Set 中的元素沒有 key， 使用 for...of 遍歷

迭代器 與 迭代對(duì)象的差別:

迭代器是一種特殊的對(duì)象，每一個(gè)迭代器都有一個(gè) next()，該方法返回一個(gè)對(duì)象，包括 value 和done 屬性

    // 實(shí)現(xiàn)一個(gè)返回迭代器對(duì)象的函數(shù)
    function createIterator(items){
        var i = 0;
        return {
          next () {
                var done = (i >= items.length);
                var value = !done ? items[i++] : "undefined"
                return {
                    done,
                    value
                }
            }
        }
    }
    const a = createIterator([1, 2, 3]);   
    //該方法返回的最終是一個(gè)對(duì)象，包含value、done屬性。
    console.log(a.next()); //{value: 1, done: false}
    console.log(a.next()); //{value: 2, done: false}
    console.log(a.next()); //{value: 3, done: false}
    console.log(a.next()); //{value: undefined, done: true}

可迭代 和 可枚舉的差別

舉例說明不可迭代

let arrayLike = {
  0: "aa",
  1: "bb",
  2: "cc",
  length: 3
}

for (var item of arrayLike) {
  console.log(item) // TypeError: arrayLike is not iterable
}

let obj = {
  a: "monday",
  b: "sunday"
}

for (var item of obj) {
  console.log(item) // TypeError: obj is not iterable
}

上面這個(gè)例子是想遍歷一個(gè) 類數(shù)組對(duì)象 和 一個(gè) 對(duì)象, 因?yàn)樗豢傻?，所以?for...of不能遍歷
報(bào)錯(cuò)TypeError: arrayLike is not iterable

但是使用 for...in 又可以遍歷了

for (var item in arrayLike) {
  console.log(item) // 0 1 2 length
}

for (var item in obj) {
  console.log(item) // a b 
}

這是為什么呢？

附上阮一峰老師的解釋

對(duì)象（Object）之所以沒有默認(rèn)部署Iterator接口，是因?yàn)閷?duì)象的哪個(gè)屬性先遍歷，哪個(gè)屬性后遍歷是不確定的，需要開發(fā)者手動(dòng)指定。本質(zhì)上，遍歷器是一種線性處理，對(duì)于任何非線性的數(shù)據(jù)結(jié)構(gòu)，部署遍歷器接口，就等于部署一種線性轉(zhuǎn)換。不過，嚴(yán)格地說，對(duì)象部署遍歷器接口并不是很必要，因?yàn)檫@時(shí)對(duì)象實(shí)際上被當(dāng)作Map結(jié)構(gòu)使用，ES5沒有Map結(jié)構(gòu)，而ES6原生提供了。

以及知乎上的解答為什么for...of對(duì)象不可迭代---賀師俊回調(diào) , 寫的很棒，一下就清晰了~

// 幾種迭代方式
for (const k of Object.keys(obj)) ... // enumerable own keys
for (const [k, v] of Object.entries(obj)) ... // enumerable own [key, value]s
for (const k of Object.getOwnPropertyNames(obj)) // all own keys
for (const s of Object.getOwnPropertySymbols(obj)) // all own symbols
for (const k of Reflect.ownKeys(obj)) // all own keys (include symbols)