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

資訊專欄INFORMATION COLUMN

js中的常見的循環(huán)迭代：for loop, forEach, for...in... for...

Leo_chen / 766人閱讀

摘要：下面就總結(jié)下中常見的幾種循環(huán)方法。因為循環(huán)將遍歷對象本身的所有可枚舉屬性，以及對象從其構(gòu)造函數(shù)原型中繼承的屬性。上也明確提示不應(yīng)該用于迭代一個，其中索引順序很重要。

引言

平時工作中循環(huán)的使用場景可以說是非常之多了，昨天改別人代碼時候有位同事非常喜歡用ES6等新特性，一個數(shù)組的遍歷全部都是用for...of...，然后業(yè)務(wù)需求要用到數(shù)組中的序號index值，就很尷尬了，我只能改回forEach了。但是for...of...在很多情況下還是很強大的，比如中斷之類的。下面就總結(jié)下js中常見的幾種循環(huán)方法。

常見的循環(huán)方法 for loop

說起for循環(huán)，大家的思緒應(yīng)該馬上就回到第一次上計算機課時候的美好大一生活吧，幾乎所有語言通用的循環(huán)方法：

for (var i = 0; i < 10; i++) {
  console.log(i);
}
for (let i = 0; i < products.length; i++) {
  console.log(products[i]);
}

簡單易懂，如果你不知道es5和es6的循環(huán)方法, 就用這個來對數(shù)組進行遍歷，并且可以用break中斷。但是對數(shù)組進行循環(huán)包一層這個條件總歸有些啰嗦，有沒有更簡潔的方法呢？當(dāng)然，繼續(xù)往下看。

forEach

forEach是Array.prototype上的方法，我們可以使用它對數(shù)組進行循環(huán)遍歷。因此一個數(shù)組就可以直接如下調(diào)用此方法即可：

products.forEach(function(product) {
  console.log(product);
});

你不需要先去計算數(shù)組的總數(shù)才能循環(huán)，直接用就可以了。那么如果需要獲取每項的序號呢？forEach方法第二個參數(shù)就是當(dāng)前循環(huán)項的index值。

products.forEach(function(product，index) {
  console.log(index, product);
});

也就等價于for循環(huán)中的寫法：
for (var i = 0; i < products.length; i++) {
console.log(i, products[i]);
}

唯一美中不足的就是forEach不支持中斷循環(huán)，如果不需要條件中斷循環(huán)數(shù)組的話，采用forEach是最好的選擇，尤其是遍歷一些嵌套數(shù)組雙重循環(huán)時候，寫起來代碼可讀性會好很多。

for...in... 
var arr = [
  "a", 
  "b"
];
for (var i in arr) {
  console.log(i); //0 1
}

以任意順序遍歷一個對象的可枚舉屬性。大家不要忘了數(shù)組也是對象...我們經(jīng)常用這個方法來遍歷一個普通對象，其實也是可以迭代一個數(shù)組的，數(shù)組的索引就是0,1,2這樣的數(shù)字。但是強烈建議不要這樣用。因為循環(huán)將遍歷對象本身的所有可枚舉屬性，以及對象從其構(gòu)造函數(shù)原型中繼承的屬性。
MDN上也明確提示：for...in不應(yīng)該用于迭代一個 Array，其中索引順序很重要。
并且如果你為了過濾迭代繼承的屬性方法，又要用hasOwnProperty這些方法，非常繁瑣。
總之通常情況下我們不會去要迭代繼承而來的屬性，因此不太推薦使用for...in...。
甚至你用forEach這樣做都好一點：

Object.keys(obj).forEach(function(key) { console.log(obj[key]) });
for...of...

最后出場也是ES6最新支持的迭代方法就是for...of...。MDN上的定義：
在可迭代對象（包括 Array，Map，Set，String，TypedArray，arguments 對象等等）上創(chuàng)建一個迭代循環(huán)，調(diào)用自定義迭代鉤子，并為每個不同屬性的值執(zhí)行語句。
可以看到它支持的種類非常多，最常用的就是Array和arguments了，但是注意雖然支持這么多并不能像for...in...用于普通Object的迭代。上面我們不推薦for...in...應(yīng)用于數(shù)組，那么for...of...就非常合適了：

var arr = [
  "a", 
  "b"
];
for (var i in arr) {
  console.log(i); //a b
}

遍歷數(shù)組，每項直接就是值，并且可以中斷，如果不關(guān)心索引的話，強烈推薦。但是回到引言那里如果你需要索引值這就不是很方便了。但是ES6中有新的entries方法可以讓for...in...也可以獲取索引。

for (let [index, val] of arr.entries()) {
      console.log(index);   
}
總結(jié)

當(dāng)遍歷Array時候，在需要索引時候推薦用forEach，不需要索引時候用for...of...。

當(dāng)?shù)?b>Object時候，雖然只能用for...in...配合hasOwnproperty過濾不需要的，但我還是推薦用Object.keys()配合forEach：

Object.keys(obj).forEach(function(key) { ... });

當(dāng)?shù)?b>String、arguments等可迭代對象時候，也只能使用for...of...。

參考

MDN for...of

MDN for...in

for..of 獲取索引

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

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

相關(guān)文章

  • [學(xué)習(xí)筆記] ES6的數(shù)組遍歷方式 for, forEach，for...in, for...of

    摘要：有如果要遍歷一個數(shù)組，我們有多個方式可以進行。循環(huán)循環(huán)的問題在于遍歷的時候獲得的是指針，要獲取元素需要的方式取到。另外迭代的是對象所有的屬性或函數(shù)都會被迭代。選用可以根據(jù)自己的實際需求。 javascript ES6有如果要遍歷一個數(shù)組，我們有多個方式可以進行。下面我們來分析一下各自的利弊。 for循環(huán) const langs = [java, php, c++, python] ...

    rozbo 評論0 收藏0

  • JavaScript的幾種循環(huán)方式

    摘要：本教程解釋了現(xiàn)代中各種各樣的循環(huán)可能性目錄介紹提供了許多迭代循環(huán)的方法。引入了循環(huán)，它結(jié)合了的簡潔性和破解能力注意使用。此循環(huán)在每次迭代中創(chuàng)建一個新范圍，因此我們可以安全地使用它而不是。 JavaScript提供了許多通過LOOPS迭代的方法。本教程解釋了現(xiàn)代JAVASCRIPT中各種各樣的循環(huán)可能性 showImg(https://segmentfault.com/img/bVbfH...

    Allen 評論0 收藏0

  • JavaScript的幾種循環(huán)方式

    摘要：本教程解釋了現(xiàn)代中各種各樣的循環(huán)可能性目錄介紹提供了許多迭代循環(huán)的方法。引入了循環(huán)，它結(jié)合了的簡潔性和破解能力注意使用。此循環(huán)在每次迭代中創(chuàng)建一個新范圍，因此我們可以安全地使用它而不是。 JavaScript提供了許多通過LOOPS迭代的方法。本教程解釋了現(xiàn)代JAVASCRIPT中各種各樣的循環(huán)可能性 showImg(https://segmentfault.com/img/bVbfH...

    piapia 評論0 收藏0

  • JavaScript的幾種循環(huán)方式

    摘要：本教程解釋了現(xiàn)代中各種各樣的循環(huán)可能性目錄介紹提供了許多迭代循環(huán)的方法。引入了循環(huán)，它結(jié)合了的簡潔性和破解能力注意使用。此循環(huán)在每次迭代中創(chuàng)建一個新范圍，因此我們可以安全地使用它而不是。 JavaScript提供了許多通過LOOPS迭代的方法。本教程解釋了現(xiàn)代JAVASCRIPT中各種各樣的循環(huán)可能性 showImg(https://segmentfault.com/img/bVbfH...

    ztyzz 評論0 收藏0

  • ES6語法之可迭代協(xié)議和迭代器協(xié)議

    摘要：有兩個協(xié)議可迭代協(xié)議和迭代器協(xié)議。為了變成可迭代對象，一個對象必須實現(xiàn)或者它原型鏈的某個對象必須有一個名字是的屬性迭代器協(xié)議該迭代器協(xié)議定義了一種標準的方式來產(chǎn)生一個有限或無限序列的值。 ECMAScript 2015的幾個補充，并不是新的內(nèi)置或語法，而是協(xié)議。這些協(xié)議可以被任何遵循某些約定的對象來實現(xiàn)。有兩個協(xié)議：可迭代協(xié)議和迭代器協(xié)議。 可迭代協(xié)議 可迭代協(xié)議允許 JavaScri...

    sarva 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<