[JavaScriptWeird]No.49 危險小叮嚀：陣列與 for in

發表於 | 更新於 | 分類於

前言

for in 我想並不陌生，因為在 Reflection 與 Extend 時有用它來遍歷物件並且印出來，然而前面我們也提到過，陣列也是物件，所以也可以在原型上加入新的屬性或方法，本篇是用來介紹關於兩者如果一起用可能會導致的問題。

直接看例子：

1
2
3
4
var arr = ['John', 'Mary', 'Tom'];  
for(var item in arr){  
  console.log(item + ': ' + arr[item]);  
}

雖然很奇怪但這是合理的結果，因為陣列也是物件。

變數 item 中的 0、1、2 其實是名稱屬性，所以可以使用中括號取用它們，而 John、Mary、Tom 是值。我們使用 for in 遍歷了整個陣列並且印出。

接著我們增加屬性到它的原型上。

1
2
3
4
5
Array.prototype.myNewAdd = 'cool!';  
var arr = ['John', 'Mary', 'Tom'];  
for(var item in arr){  
  console.log(item + ': ' + arr[item]);  
}

結果居然多跑出一行我們新增到原型上的屬性，為什麼？

因為陣列也是物件，而 for in 會找到原型鏈上，把原型上的屬性、方法一起遍歷，所以再一些不需要 for in 的情況中可以使用 for 迴圈即可，像是這樣：

1
2
3
for(var i = 0; i < arr.length; i++){  
  console.log(i + ': ' + arr\[i\]);  
}

0%