首先介紹一下for of 

for of 是在es6中新加入的東西，如果說(shuō)for of 給我們最直觀的體現(xiàn)就是使用for of 去遍歷數(shù)組的話，直接打印輸出的是value值，這一點(diǎn)和for in打印輸出的是索引值index是不同的，這是對(duì)于我們這些初學(xué)者最直觀的感受。

其次for of 最本質(zhì)的區(qū)別就是他不能用來(lái)直接遍歷普通的對(duì)象，而只能遍歷部署了iterator(迭代器)接口的類(lèi)數(shù)組對(duì)象.

那么什么是iterator呢?

迭代器（Iterator）就是這樣一種機(jī)制。它是一種接口，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問(wèn)機(jī)制。任何數(shù)據(jù)結(jié)構(gòu)只要部署 Iterator 接口，就可以完成遍歷操作（即依次處理該數(shù)據(jù)結(jié)構(gòu)的所有成員）

下面的例子正好說(shuō)明for of 是不能遍歷普通的對(duì)象的：

let obj2 = { x: 1,y: 2, z: 3,};
for (const value of obj2) {
 ?console.log(value);
}
//遍歷時(shí)出錯(cuò)
//Uncaught TypeError: obj2 is not iterable

這是因?yàn)槠胀▽?duì)象不是 可迭代對(duì)象,這里面提到的可迭代對(duì)象是一種實(shí)現(xiàn)了迭代器協(xié)議的對(duì)象，其中的迭代器協(xié)議要求對(duì)象部署了這個(gè)iterator,而這個(gè)方法是掛載在原型下Symbol(Symbol.iterator)方法，因此我們?cè)谑褂胒or of 去處理比如說(shuō)是數(shù)組的時(shí)候,其實(shí)就是調(diào)用了數(shù)組原型下的這個(gè)方法,每當(dāng)調(diào)用這個(gè)方法之后,方法內(nèi)部就會(huì)返回next方法,這就相當(dāng)于是''指針'', 下次在調(diào)用的時(shí)候''指針''就后移動(dòng)

對(duì)此，可能很多同學(xué)還是感覺(jué)蒙蒙的，這里舉一個(gè)例子來(lái)說(shuō)明：

let obj = {
 ?data: [1, 2, 3],
 ?// 這里給對(duì)象實(shí)現(xiàn)了一個(gè)迭代器方法
  [Symbol.iterator]() {
 ? ?let index = 0;
 ? ?const data = this.data;
 ? ?return {
 ? ? ?next() {
 ? ? ? ?if (index < data.length) {
 ? ? ? ? ?return { ?value: data[index++], done: false, };
 ? ? ?  } else {
 ? ? ? ? ?return { done: true };
 ? ? ?  }
 ? ?  },
 ?  };
  },
};
for (const value of obj) {
 ?console.log(value);
}//1 2 3

在經(jīng)過(guò)這樣的處理之后，我們就給對(duì)象實(shí)現(xiàn)了迭代器的方法。這樣我們就可以使用for of 來(lái)對(duì)這個(gè)obj對(duì)象的遍歷，大家看完這段代碼肯定是一頭霧水，這主要是對(duì)Symbol.iterator和next方法的不了解，我就來(lái)簡(jiǎn)單的介紹一下這兩個(gè)方法。

• Symbol.iterator這個(gè)是什么呢？其實(shí)這個(gè)屬性是一個(gè)函數(shù)，他的返回值是一個(gè)迭代器對(duì)象，我們?cè)趯?duì)象中定義這個(gè)屬性之后，當(dāng)我們使用for of 的時(shí)候，語(yǔ)言機(jī)制會(huì)去尋找一種方法，這個(gè)方法就是next方法，當(dāng)我們?cè)趯?duì)象中使用這個(gè)屬性的時(shí)候，其實(shí)就是覆蓋了默認(rèn)的迭代器，這樣我們就可以實(shí)現(xiàn)自己的邏輯代碼。
• 其次我們要注意返回的迭代器對(duì)象：我們要知道，迭代器對(duì)象是要帶有next方法的對(duì)象，而且這個(gè)next方法的返回值還必須是一個(gè)包含value和done的對(duì)象。其中value是當(dāng)前值,而done表示是否全部遍歷完成.
• 那么迭代器一般是如何使用的呢?其實(shí)無(wú)論是數(shù)組,對(duì)象,集合或者是其他的數(shù)據(jù)結(jié)構(gòu),迭代器中都是提供了next方法,每次去調(diào)用這個(gè)next方法都會(huì)返回這個(gè)數(shù)據(jù)集合的下一個(gè)值,聯(lián)想一下C語(yǔ)言中的''指針''移動(dòng),這也就解釋了為什么這里面要有一個(gè)next方法了.
• 所以這部分代碼也就變的比較的好理解了，我們實(shí)現(xiàn)了了一個(gè)Symbol.iterator方法，然后在里面定義了索引index并獲取到了data數(shù)組，接著我們就return一個(gè)迭代器對(duì)象，里面包含next方法，然后進(jìn)行判斷如果當(dāng)前索引小于數(shù)組長(zhǎng)度，那么就返回一個(gè)對(duì)象里面包含此時(shí)的value值和done，并且done為false，表明此時(shí)迭代并沒(méi)有完成，否則就是最終返回一個(gè)done為true，表明此時(shí)迭代事件已經(jīng)完成。

經(jīng)過(guò)上面的處理大家也看到這樣做是非常麻煩的,如果我們不想要通過(guò)這種方式去獲取每一個(gè)值呢?那么我們只能來(lái)使用一些巧妙的手段來(lái)處理一下:我們要避免直接的去遍歷對(duì)象,而是要通過(guò)某種方法來(lái)進(jìn)行一個(gè)過(guò)渡的處理.

所以如果我們要使用for of來(lái)去迭代對(duì)象，那么我們只能通過(guò)一些手段來(lái)處理加工一下才可以

let sum = 0;
let obj3 = {x: 1,y: 2, z: 3,};
for (const value of Object.values(obj3)) {
 ?sum += value;
}
console.log(Object.values(obj3));//[1,2,3]
console.log(sum);//6

在這里面我們使用了Object.values方法來(lái)獲取對(duì)象中的值，經(jīng)過(guò)處理之后返回一個(gè)數(shù)組，里面是包含對(duì)象中值的數(shù)組.而像數(shù)組，Map。Set，字符串，這都是內(nèi)置了迭代器的類(lèi)型，因此可以使用for of來(lái)進(jìn)行迭代處理。當(dāng)然這里面我們還可以使用類(lèi)似Object.entries()和Object.keys()等方法來(lái)處理,這里就不再展開(kāi).

接著說(shuō)一下for in

在介紹完for of之后我們緊接著說(shuō)一下for in，for in最直接的體現(xiàn)就是它可以直接的遍歷處理對(duì)象類(lèi)型的數(shù)據(jù)，不需要像for of那樣在給他增加一個(gè)迭代器屬性，下面我就來(lái)介紹一下：

let obj4 = {
 ?hobby: "唱,跳,rap",
 ?name: "kun",
 ?sex: "男",
};
for (const key in obj4) {
 ?console.log("屬性名" + key, "屬性值" + obj4[key]);
}

采用這種方式就不會(huì)出現(xiàn)報(bào)錯(cuò)，可以正常的打印輸出值。因此如果我們?cè)趯?shí)際場(chǎng)景中使用的時(shí)候一般處理對(duì)象肯定是要使用for in來(lái)處理，但是像是如果遇到字符串，map等等這些本身帶有迭代器的類(lèi)型我們就可以交給for of 來(lái)處理，具體場(chǎng)景具體說(shuō)明。

同時(shí)這也應(yīng)證了上面所說(shuō)的使用for in 中打印的是key值，因此我們要想獲取屬性值要通過(guò)obj4[key]。

同樣使用for in我們也可以處理類(lèi)似像map，set，string等類(lèi)型的數(shù)據(jù)。但是和for of 最顯著的區(qū)別還是我們可以直接處理對(duì)象.

總結(jié)

這里面我們解釋了為什么for of 不能用來(lái)處理普通的對(duì)象,以及如何去處理,并且介紹了每種方法適合用來(lái)解決的問(wèn)題,因此我們?cè)谑褂玫臅r(shí)候要根據(jù)具體的場(chǎng)景來(lái)具體的分析處理.

到此這篇關(guān)于JavaScript中for of和for in的區(qū)別詳解的文章就介紹到這了,更多相關(guān)JavaScript for of和for in區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論