成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【快速入門系列】簡述 for...in 和 for...of 區(qū)別

ashe / 3073人閱讀

摘要：像和使用內(nèi)置構(gòu)造函數(shù)所創(chuàng)建的對(duì)象都會(huì)繼承自和的不可枚舉屬性，例如的方法或的方法。循環(huán)將遍歷對(duì)象本身的所有可枚舉屬性，以及對(duì)象從其構(gòu)造函數(shù)原型中繼承的屬性更接近原型鏈中對(duì)象的屬性覆蓋原型屬性。遍歷數(shù)組時(shí)推薦使用，其中為數(shù)組每一項(xiàng)的值。

引言

在對(duì)數(shù)組或?qū)ο筮M(jìn)行遍歷時(shí)，我們經(jīng)常會(huì)使用到兩種方法：for...in 和 for...of，那么這兩種方法之間的區(qū)別是什么呢？讓我們來研究研究。

一、for...in

首先我們看下MDN對(duì)for...in方法的解釋：for...in | MDN

for...in 循環(huán)只遍歷可枚舉屬性。像 Array和 Object使用內(nèi)置構(gòu)造函數(shù)所創(chuàng)建的對(duì)象都會(huì)繼承自O(shè)bject.prototype和String.prototype的不可枚舉屬性，例如 String 的 indexOf()  方法或 Object的toString()方法。循環(huán)將遍歷對(duì)象本身的所有可枚舉屬性，以及對(duì)象從其構(gòu)造函數(shù)原型中繼承的屬性（更接近原型鏈中對(duì)象的屬性覆蓋原型屬性）。

首先，我們簡單的使用for...in分別對(duì)對(duì)象和數(shù)組進(jìn)行遍歷：

// 遍歷對(duì)象
let obj = {
  a: 1,
  b: 2,
  c: 3
};
for(let item in obj) {
  console.log("item:" + item);
  console.log(obj[item]);
}

// 運(yùn)行結(jié)果
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]);
}

// 運(yùn)行結(jié)果
item:0
1
item:1
2
item:2
3

我們發(fā)現(xiàn)，使用for...in進(jìn)行遍歷時(shí)，item值為對(duì)象的key，為數(shù)組的index。
我們知道，數(shù)組索引只是具有整數(shù)名稱的枚舉屬性，并且與通用對(duì)象屬性相同，因此不能保證for...in以某種固定的順序返回索引，因此，不推薦使用for...in進(jìn)行數(shù)組的遍歷。

下面，我們?cè)谏厦娲a的基礎(chǔ)上，在arr數(shù)組上增加一個(gè)自定義屬性，再次遍歷，查看結(jié)果。

arr.name = "arrName";
for(let item in arr) {
  console.log("item:" + item);
  console.log(arr[item]);
}

// 運(yùn)行結(jié)果
item:0
1
item:1
2
item:2
3
item:name
arrName

我們發(fā)現(xiàn)，for...in不僅會(huì)遍歷數(shù)組中的元素，還會(huì)遍歷自定義屬性。

二、for...of

說完for...in我們?cè)賮砜纯?b>for...of，我們還是先來看看MDN對(duì)其的解釋 for...of | MDN

for...of語句在可迭代對(duì)象（包括 Array，Map，Set，String，TypedArray，arguments 對(duì)象等等）上創(chuàng)建一個(gè)迭代循環(huán)，調(diào)用自定義迭代鉤子，并為每個(gè)不同屬性的值執(zhí)行語句。

同樣的，我們還是使用與for...in相同的代碼進(jìn)行測試

// 遍歷對(duì)象
let obj = {
  a: 1,
  b: 2,
  c: 3
};
for(let item of obj) {
  console.log("item:" + item);
  console.log(obj[item]);
}

// 運(yùn)行結(jié)果
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]);
}

// 運(yùn)行結(jié)果
item:1
undefined
item:2
undefined
item:3
undefined

我們可以看出，使用for...of對(duì)對(duì)象進(jìn)行遍歷時(shí)，報(bào)了TypeError: obj is not iterable錯(cuò)誤，對(duì)數(shù)組進(jìn)行遍歷時(shí)，item直接是數(shù)組每一項(xiàng)的值。

我們?cè)贋閍rr增加自定義屬性，查看效果。

arr.name = "arrName";
for(let item in arr) {
  console.log("item:" + item);
  console.log(arr[item]);
}

// 運(yùn)行結(jié)果
item:1
undefined
item:2
undefined
item:3
undefined

for...of沒有對(duì)數(shù)組的自定義屬性進(jìn)行遍歷。

三、總結(jié)

根據(jù)以上測試結(jié)果并參考了相關(guān)資料，我們得出了以下結(jié)論：

遍歷對(duì)象時(shí)推薦使用for...in，其中item為對(duì)象的key。使用for...of會(huì)報(bào)錯(cuò)。

遍歷數(shù)組時(shí)推薦使用for...of，其中item為數(shù)組每一項(xiàng)的值。使用for...in則不能保證遍歷順序且會(huì)遍歷出自定義屬性。

for...in是ES5特性，for...of是ES6特性，因此需要注意兼容性。

如果要使用for...of遍歷普通對(duì)象，需要配合Object.keys()一起使用。

結(jié)束語

以上內(nèi)容是我們對(duì)for...in和for...of的測試對(duì)比，在使用時(shí)記住其區(qū)別可更快的編寫代碼和排查錯(cuò)誤，若想了解其更深層區(qū)別，建議認(rèn)真閱讀MDN相關(guān)資料。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94911.html

相關(guān)文章

  • javaScript中 for...in 和 for...of 的區(qū)別

    摘要：和的差異解析是標(biāo)準(zhǔn)，是針對(duì)的不足而補(bǔ)充的方法。遍歷的是數(shù)組中元素的值。當(dāng)使用遍歷數(shù)組的時(shí)候，我們得到的實(shí)際上是數(shù)組的索引值鍵值，同時(shí)如果數(shù)組存在別的屬性的話，也會(huì)被遍歷出來。甚至可以遍歷到對(duì)象的原型方法和屬性一個(gè)栗子參考簡述中與區(qū)別 for...in和for...of使用場景差異 一句話：遍歷對(duì)象的屬性時(shí)，用for...in。想遍歷數(shù)組中元素的值的話,用for...of。 for......

    alanoddsoff 評(píng)論0 收藏0

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快...

    pumpkin9 評(píng)論0 收藏0

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快...

    Carson 評(píng)論0 收藏0

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快...

    muzhuyu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<