iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
0
自我挑戰組

這些日子我學到的JavaScript 系列 第 11

這些日子我學到的JavaScript:Day11-物件搭配陣列

  • 分享至 

  • xImage
  •  

若同時需要很多個物件,我們可以在陣列內儲存多個物件,如下:

var farms = [
{
farmer: 'Jerry',
chicken: 5,
duck: 6,
dogs: ['小白','小黑']
},
{
farmer: 'Tom',
chicken: 8,
duck: 3,
dogs: ['皮皮']
}
];
前面有講到屬性不只可以賦予值,也可以是函式,不妨來增加點有函式的屬性:

farms[0].poultry = function(){
var total = this.chicken + this.duck;
console.log(total);
};
farms[1].poultry = function(){
var total = this.chicken + this.duck;
console.log(total);
};
以上複習到了前面兩個觀念:

陣列的讀取是要中括號搭配索引編號
讀取物件的屬性
所以我們在整個 farms 陣列內先讀取第一個資料,即 farms[0]
接下來為它新增一個屬性 farms[0].poultry
且這個屬性賦予一個函式用來計算所有的家禽farms[0].poultry = function(){...}

若此時在 console 呼叫 farms 這個陣列會如下:

var farms = [
{
farmer: 'Jerry',
chicken: 5,
duck: 6,
dogs: ['小白','小黑'],
poultry: function(){
var total = this.chicken + this.duck;
console.log(total);
}
},
{
farmer: 'Tom',
chicken: 8,
duck: 3,
dogs: ['皮皮'],
poultry: function(){
var total = this.chicken + this.duck;
console.log(total);
}
}
];
如果此時想要計算第二個物件的家禽數量:

console.log(farms[1].poultry());
此時會在 console 看到 11

如果想要讀取第一個物件的 dogs 屬性的第一筆資料,則:

console.log(farms[0].dogs[0]);
此時會在 console 看到 小白

這裡資料型態讀取上都是依照前面講過的觀念,不同資料型態讀取上會較複雜,可以多重複看幾次來消化


上一篇
這些日子我學到的JavaScript:Day10-全域物件
下一篇
這些日子我學到的JavaScript:Day12-運算子
系列文
這些日子我學到的JavaScript 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言