国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

js中的常見的循環迭代：for loop, forEach, for...in... for...

Leo_chen / 768人閱讀

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

引言

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

常見的循環方法 for loop

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

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

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

forEach

forEach是Array.prototype上的方法，我們可以使用它對數組進行循環遍歷。因此一個數組就可以直接如下調用此方法即可：

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

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

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

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

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

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

以任意順序遍歷一個對象的可枚舉屬性。大家不要忘了數組也是對象...我們經常用這個方法來遍歷一個普通對象，其實也是可以迭代一個數組的，數組的索引就是0,1,2這樣的數字。但是強烈建議不要這樣用。因為循環將遍歷對象本身的所有可枚舉屬性，以及對象從其構造函數原型中繼承的屬性。
MDN上也明確提示：for...in不應該用于迭代一個 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 對象等等）上創建一個迭代循環，調用自定義迭代鉤子，并為每個不同屬性的值執行語句。
可以看到它支持的種類非常多，最常用的就是Array和arguments了，但是注意雖然支持這么多并不能像for...in...用于普通Object的迭代。上面我們不推薦for...in...應用于數組，那么for...of...就非常合適了：

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

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

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

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

當迭代Object時候，雖然只能用for...in...配合hasOwnproperty過濾不需要的，但我還是推薦用Object.keys()配合forEach：

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

當迭代String、arguments等可迭代對象時候，也只能使用for...of...。

參考

MDN for...of

MDN for...in

for..of 獲取索引

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98969.html

相關文章

  • [學習筆記] ES6的數組遍歷方式 for, forEach，for...in, for...of

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

    rozbo 評論0 收藏0

  • JavaScript的幾種循環方式

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

    Allen 評論0 收藏0

  • JavaScript的幾種循環方式

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

    piapia 評論0 收藏0

  • JavaScript的幾種循環方式

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

    ztyzz 評論0 收藏0

  • ES6語法之可迭代協議和迭代器協議

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

    sarva 評論0 收藏0

發表評論

0條評論

Leo_chen

男|高級講師

TA的文章

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