首先介紹一下for of 

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

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

那么什么是iterator呢?

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

下面的例子正好說明for of 是不能遍歷普通的對象的：

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

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

對此，可能很多同學(xué)還是感覺蒙蒙的，這里舉一個例子來說明：

let obj = {
 ?data: [1, 2, 3],
 ?// 這里給對象實現(xiàn)了一個迭代器方法
  [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)過這樣的處理之后，我們就給對象實現(xiàn)了迭代器的方法。這樣我們就可以使用for of 來對這個obj對象的遍歷，大家看完這段代碼肯定是一頭霧水，這主要是對Symbol.iterator和next方法的不了解，我就來簡單的介紹一下這兩個方法。

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

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

所以如果我們要使用for of來去迭代對象，那么我們只能通過一些手段來處理加工一下才可以

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

接著說一下for in

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

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

采用這種方式就不會出現(xiàn)報錯，可以正常的打印輸出值。因此如果我們在實際場景中使用的時候一般處理對象肯定是要使用for in來處理，但是像是如果遇到字符串，map等等這些本身帶有迭代器的類型我們就可以交給for of 來處理，具體場景具體說明。

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

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

總結(jié)

這里面我們解釋了為什么for of 不能用來處理普通的對象,以及如何去處理,并且介紹了每種方法適合用來解決的問題,因此我們在使用的時候要根據(jù)具體的場景來具體的分析處理.

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

最新評論