iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
0
Modern Web

教練我想學 JavaScript 系列 第 28

Day 28 陣列與 for in

之前我們透過 for in 來察看物件中的屬性與屬性值,
但 for in 也可以印出陣列中的每個成員,因為陣列也算是一種特殊的物件,

程式碼如下:

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

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

在 Console 中的結果如下:

但你會發現陣列成員的屬性名稱居然是數字,
這是因為陣列沒有屬性名稱,只有索引值,第一個成員的索引值是從 0 開始算,
在取用陣列中的屬性名稱時,因為陣列沒有屬性名稱所以就把索引值拿來當作屬性名稱,
所以可以透過[]來取用每個索引,

如果這時候我們在內建的函數建構子 Array 的prototype屬性添加一個屬性,會發生很奇怪的事,
程式碼如下:

Array.prototype.myCustomFeature = 'cool!';

var arr = ['John', 'Jane', 'Jim']; // 透過這種方式建立陣列會呼叫 new Aarray(),透過 [] 陣列實體語法只是一種快速建立陣列的方法

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

Console 的結果如下:

for in 在執行每次迴圈居然把陣列原型中的屬性印出來,

如果不想印出陣列原型屬性中的屬性,可以使用一般的 for 迴圈,
程式碼如下:

Array.prototype.myCustomFeature = 'cool!';

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

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

Console 中的結果如下:

這是陣列在使用 for in 時需要注意的地方。


上一篇
Day 27 函數建構子與 prototype
下一篇
Day 29 Object.create
系列文
教練我想學 JavaScript 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言