for...in和for...of的介紹及區(qū)別
for...in
以任意順序遍歷一個對象自有的、繼承的、可枚舉[1]的、非Symbol的屬性。對于每個不同的屬性，語句都會被執(zhí)行（MDN）
簡單來說下圖：就是for...in是無序遍歷，有可能遍歷數(shù)組的時候，不能保證順序是正常的取出來。所以不推薦用for...in遍歷數(shù)組類型值。
for...in循環(huán)有幾個缺點[2]
-
數(shù)組的鍵名是數(shù)字，但是 for...in循環(huán)是以字符串作為鍵名"0"、"1"、"2"等等。 -
for...in循環(huán)不僅遍歷數(shù)字鍵名，還會遍歷手動添加的其他鍵，甚至包括原型鏈上的鍵。 -
某些情況下， for...in循環(huán)會以任意順序遍歷鍵名。 -
for...in循環(huán)只能獲得對象的鍵名，不能直接獲取鍵值
盡量不要用for in遍歷數(shù)組
集合遍歷的效率為：hash > for(;;) > for...in
集合相關操作首選對象，次之用for循環(huán)遍歷。
for...of
for...of是遍歷所有數(shù)據(jù)結構的統(tǒng)一的方法，但是只能遍歷具有iterator迭代接口的值。因for...of循環(huán)內部調用的是數(shù)據(jù)結構的Symbol.iterator方法。
for...of循環(huán)可以使用的范圍包括：
數(shù)組、Set 和 Map 結構、某些類似數(shù)組的對象（比如arguments對象、DOM NodeList 對象）、后文的 Generator 對象，以及字符串。
原生Object沒有這個接口，默認是不能用for...of進行遍歷的，會報錯：
不同點
-
for...in可以遍歷對象，for...of不可以； -
for...in循環(huán)讀取鍵名，for...of循環(huán)讀取鍵值； -
for...in不適用于遍歷數(shù)組，原因如下一條。 -
for...of循環(huán)調用遍歷器接口，這一點跟for...in循環(huán)也不一樣。所以遍歷數(shù)字集合的數(shù)組時，for...in返回字符串，for...of返回的是數(shù)字。
-
let arr = [3, 5];
for (let i in arr) {
console.log(i); // 字符串類型的鍵名：'0', '1'
}
for (let i of arr) {
console.log(i); // 數(shù)字類型的值：3, 5
}
性能比較：
for/while > forEach等(函數(shù)式編程+for) > for...of > for...in
參考資料
可枚舉的: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Enumerability_and_ownership_of_properties
[2]es6文檔關于for...in相關知識: https://es6.ruanyifeng.com/#docs/iterator#for---of-%E5%BE%AA%E7%8E%AF
讓我們一起攜手同走前端路！
關注公眾號回復【加群】即可
評論
圖片
表情