[JS奇怪的世界]No.55 危險小叮嚀：陣列與for in

發表於 2019-05-23 分類於克服JS奇怪的部分系列

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

前面已經瞭解了使用內建函數建構子的某些危險地方，但其實陣列與for in，也是有一些危險的地方。

前言

前面已經瞭解了使用內建函數建構子的某些危險地方，但其實陣列與for in，也是有一些危險的地方。

陣列與for in

在前面幾個章節有講過陣列就是物件，所以我們一樣可以使用 for in來做處理。

var arr = ['John', 'Jane', 'Jim'];

for (var prop in arr) {
  console.log(prop + ': ' + arr[prop]);
}

JavaScript 的陣列與其他程式語言有點不太一樣，prop 其實是名稱而 arr[prop] 是值的配對，而這就像名稱/值的配對，所以我們可以透過中括號取的，有點模糊吧，試著寫出物件會比較清楚。

var obj = {
  0: 'John',
  1: 'Jane',
  2: 'Jim',
}

obj[0];

而這代表著有一些問題，課堂上是著在原型上加入一個原型。

Array.prototype.myCustomFeature = 'cool!';

var arr = ['John', 'Jane', 'Jim'];

for (var prop in arr) {
  console.log(prop + ': ' + arr[prop]);
}

我們可以看到剛剛加入至原型中的東西被跟著輸出了，原因是 var arr = ['John', 'Jane', 'Jim']; 這一段實體語法是在呼叫 new Array，所以在某些情況下不要對陣列使用 for in，而是使用 for。

Array.prototype.myCustomFeature = 'cool!';

var arr = ['John', 'Jane', 'Jim'];

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

所以一般來講都會避免再 JavaScript 中使用 for in，因為陣列就是物件。

圖源

JavaScript 全攻略:克服 JS 奇怪的部分