資訊專欄INFORMATION COLUMN
摘要：像和使用內置構造函數(shù)所創(chuàng)建的對象都會繼承自和的不可枚舉屬性，例如的方法或的方法。循環(huán)將遍歷對象本身的所有可枚舉屬性，以及對象從其構造函數(shù)原型中繼承的屬性更接近原型鏈中對象的屬性覆蓋原型屬性。遍歷數(shù)組時推薦使用，其中為數(shù)組每一項的值。
引言
在對數(shù)組或對象進行遍歷時，我們經(jīng)常會使用到兩種方法：for...in 和 for...of，那么這兩種方法之間的區(qū)別是什么呢？讓我們來研究研究。
一、for...in首先我們看下MDN對for...in方法的解釋：for...in | MDN
for...in 循環(huán)只遍歷可枚舉屬性。像 Array和 Object使用內置構造函數(shù)所創(chuàng)建的對象都會繼承自Object.prototype和String.prototype的不可枚舉屬性，例如 String 的 indexOf() 方法或 Object的toString()方法。循環(huán)將遍歷對象本身的所有可枚舉屬性，以及對象從其構造函數(shù)原型中繼承的屬性（更接近原型鏈中對象的屬性覆蓋原型屬性）。
首先，我們簡單的使用for...in分別對對象和數(shù)組進行遍歷：
// 遍歷對象
let obj = {
a: 1,
b: 2,
c: 3
};
for(let item in obj) {
console.log("item:" + item);
console.log(obj[item]);
}
// 運行結果
item:a
1
item:b
2
item:c
3
// 遍歷數(shù)組
let arr = [1, 2, 3];
for(let item in arr) {
console.log("item:" + item);
console.log(arr[item]);
}
// 運行結果
item:0
1
item:1
2
item:2
3
我們發(fā)現(xiàn)，使用for...in進行遍歷時，item值為對象的key，為數(shù)組的index。
我們知道，數(shù)組索引只是具有整數(shù)名稱的枚舉屬性，并且與通用對象屬性相同，因此不能保證for...in以某種固定的順序返回索引，因此，不推薦使用for...in進行數(shù)組的遍歷。
下面，我們在上面代碼的基礎上，在arr數(shù)組上增加一個自定義屬性，再次遍歷，查看結果。
arr.name = "arrName";
for(let item in arr) {
console.log("item:" + item);
console.log(arr[item]);
}
// 運行結果
item:0
1
item:1
2
item:2
3
item:name
arrName
我們發(fā)現(xiàn)，for...in不僅會遍歷數(shù)組中的元素，還會遍歷自定義屬性。
二、for...of說完for...in我們再來看看for...of，我們還是先來看看MDN對其的解釋 for...of | MDN
for...of語句在可迭代對象（包括 Array，Map，Set，String，TypedArray，arguments 對象等等）上創(chuàng)建一個迭代循環(huán)，調用自定義迭代鉤子，并為每個不同屬性的值執(zhí)行語句。
同樣的，我們還是使用與for...in相同的代碼進行測試
// 遍歷對象
let obj = {
a: 1,
b: 2,
c: 3
};
for(let item of obj) {
console.log("item:" + item);
console.log(obj[item]);
}
// 運行結果
for(let item of obj) {
^
TypeError: obj is not iterable
...
// 遍歷數(shù)組
let arr = [1, 2, 3];
for(let item of arr) {
console.log("item:" + item);
console.log(arr[item]);
}
// 運行結果
item:1
undefined
item:2
undefined
item:3
undefined
我們可以看出，使用for...of對對象進行遍歷時，報了TypeError: obj is not iterable錯誤，對數(shù)組進行遍歷時，item直接是數(shù)組每一項的值。
我們再為arr增加自定義屬性，查看效果。
arr.name = "arrName";
for(let item in arr) {
console.log("item:" + item);
console.log(arr[item]);
}
// 運行結果
item:1
undefined
item:2
undefined
item:3
undefined
for...of沒有對數(shù)組的自定義屬性進行遍歷。
三、總結根據(jù)以上測試結果并參考了相關資料，我們得出了以下結論：
遍歷對象時推薦使用for...in，其中item為對象的key。使用for...of會報錯。
遍歷數(shù)組時推薦使用for...of，其中item為數(shù)組每一項的值。使用for...in則不能保證遍歷順序且會遍歷出自定義屬性。
for...in是ES5特性，for...of是ES6特性，因此需要注意兼容性。
如果要使用for...of遍歷普通對象，需要配合Object.keys()一起使用。
結束語以上內容是我們對for...in和for...of的測試對比，在使用時記住其區(qū)別可更快的編寫代碼和排查錯誤，若想了解其更深層區(qū)別，建議認真閱讀MDN相關資料。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94911.html
摘要：和的差異解析是標準，是針對的不足而補充的方法。遍歷的是數(shù)組中元素的值。當使用遍歷數(shù)組的時候，我們得到的實際上是數(shù)組的索引值鍵值，同時如果數(shù)組存在別的屬性的話，也會被遍歷出來。甚至可以遍歷到對象的原型方法和屬性一個栗子參考簡述中與區(qū)別 for...in和for...of使用場景差異 一句話：遍歷對象的屬性時，用for...in。想遍歷數(shù)組中元素的值的話,用for...of。 for......
摘要：并總結經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發(fā)和面試問題，由基礎到困難循序漸進，適合面試和開發(fā)小程序。并總結vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...
摘要：并總結經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發(fā)和面試問題，由基礎到困難循序漸進，適合面試和開發(fā)小程序。并總結vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...
摘要：并總結經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發(fā)和面試問題，由基礎到困難循序漸進，適合面試和開發(fā)小程序。并總結vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...
閱讀 3143·2021-11-23 10:02
閱讀 3118·2021-11-16 11:53
閱讀 3093·2021-09-23 11:21
閱讀 3369·2019-08-30 13:02
閱讀 1622·2019-08-29 16:18
閱讀 1557·2019-08-29 12:55
閱讀 1457·2019-08-26 12:24
閱讀 2085·2019-08-26 10:36
