物件+陣列設計流程

Posted on In

在「陣列」中，「相同屬性的資料」就可以用「物件」包起來，儲存在陣列裡面

利用「物件+陣列」，記錄「兩個農場」的資料

🎃 最外層，用一個「中括號」包起來–> 代表是「陣列」

🎃 在「陣列」裡面，加入「兩個物件」–> 每個物件都用一個「大括號」包起來

🎃 「每個物件」之間，要用「逗號」區隔開來

讀取「陣列中，物件的第一筆資料」

JS:

1
2
3
4
5
var farms = [
    {
        farmer: '卡斯伯',        
    }
]

現在，我想要讀取farms陣列中，「物件」的「第一筆資料」

❌ 錯誤寫法

如果只有寫farms[0]，撈出的是「陣列中的“第一個物件”」

JS:

1
2
3
4
5
6
7
var farms = [
    {
        farmer: '卡斯伯',        
    }
]

console.log(farms[0]);

但是，我要撈出的資料是「'卡斯伯'」

✅ 正確寫法

🎃 要讀取「物件中的“farmer屬性”」，所以要加上.farmer

JS:

1
2
3
4
5
6
7
var farms = [
    {
        farmer: '卡斯伯',        
    }
]

console.log(farms[0].farmer);

新增「第二個物件」到陣列中

JS:

1
2
3
4
5
6
7
8
var farms = [
    {
        farmer: '卡斯伯',        
    },
    {
        farmer: '洧杰',
    }
]

讀取陣列中「第二個物件」的「第一筆資料」

🎃 先選擇farms這個「陣列」

🎃 farms[1] 指向「陣列中的“第二個位置”」（第二個物件）

🎃 .farmer 讀取物件中的「屬性」

JS:

1
2
3
4
5
6
7
8
9
10
var farms = [
    {
        farmer: '卡斯伯',        
    },
    {
        farmer: '洧杰',
    }
]

console.log(farms[1].farmer);

撈出「第二個物件」的「dogs的值」

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var farms = [
    {
        farmer: '卡斯伯',
        dogs: ['張姆士', '龐的'],
        chick: 15,
        cornField: [8, 5, 6],
        broccoliField: [6, 6, 6, 6],
        scarecrow: 9
    },
    {
        farmer: '查理',
        dogs: ['皮皮'],
        chick: 30,
        cornField: [18, 12],
        broccoliField: [8, 8, 8],
        scarecrow: 6
    }
]

現在，我要撈出「第二個物件」的「dogs的值」

作法如下

JS:

1
console.log(farms[1].dogs[0]);

🎃 先選取「farms這個陣列」

🎃 farms[1]–> 撈出「farms陣列中的“第二個物件”」

🎃 .dogs–> 指向「物件中的dogs屬性」

🎃 .dogs[0]–> 撈出「dogs陣列中的“第一筆資料”」