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

引言

平時工做中循環的使用場景能夠說是很是之多了，昨天改別人代碼時候有位同事很是喜歡用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);   
}

總結

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

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

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

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

參考

• MDN for...of
• MDN for...in
• for..of 獲取索引