1. 程式人生 > >javascript陣列遍歷for in的一些坑

javascript陣列遍歷for in的一些坑

js中陣列遍歷的時候,常見的的是for迴圈,簡單易懂

for (var index = 0; index < myArray.length; index++) {
 console.log(myArray[index]);
}

但這樣寫比較麻煩

也許你想到了用陣列的forEach方法遍歷

myArray.forEach(function (value) {
 console.log(value);
});

短小精悍,簡要的表達了效果,但是存在以下幾種坑:
1.不能使用 break 語句來跳出迴圈;
2.不能使用 return 語句來從閉包函式中返回。

還有一種for in迴圈遍歷

for (var index in myArray) { 
 console.log(myArray[index]);
}

這看起來也很簡潔,並且沒有forEach的一些毛病;
但是不建議對陣列採取這種方法進行遍歷,原因在於:
程式碼中的 index 變數將會是 “0”、”1”、”3” 等這樣的字串,而並不是數值型別。如果你使用字串的 index 去參與某些運算(”2” + 1 == “21”),運算結果可能會不符合預期。

var myArray=[1,2,3,4,5];
for (var index in myArray) { 
 console.log(index+1);
}

輸出結果如下:
這裡寫圖片描述
顯而易見,index的資料型別是string並不是number,如果對index做些運算,那就尷尬了

還有一個毛病是不僅陣列本身的元素將被遍歷到,使用者自己為陣列新增的一些屬性也會被遍歷到,甚至陣列原型鏈上的屬性也可能被遍歷到。

  var myArray=new Array(1,2,3,4,5);
      myArray.name="hello";
      Array.prototype.method=function(){
          console.log("world");
      }
      for (var index in
myArray) { console.log(index); }

輸出結果如下:
這裡寫圖片描述
結果是不是很有意思

還有一個坑是:
在某些情況下,上面程式碼將會以任意順序去遍歷陣列元素,即顯示順序並不是按我們所想的那樣。

因此,for-in 設計的目的是用於遍歷包含鍵值對的物件,對陣列並不是那麼友好。
遍歷陣列的話還是用es6的for of迴圈遍歷比較好,改天介紹一下。