物件寫法教學

這篇更詳細的介紹「物件」的各種用法

建立「空的物件」

JS:

var farm = {};

用console.log()去看看

var farm = {};

console.log(farm);

Console 就會顯示一個「空的物件」

「新增屬性」到物件中

JS:

🎃 「'卡斯伯'」是字串，所以要用「單引號」包起來

var farm = {
    farmer: '卡斯伯',
};

console.log(farm);

Console 就會顯示 {farmer: ‘卡斯伯’}

現在，

• 我想要在「farm物件」裡面，新增「chick屬性」
• 並且賦予「chick屬性」= 15

🎃 用farm.chick = 15;來新增

‼️ 「物件」都是使用「.」來新增、讀取屬性

JS:

var farm = {
    farmer: '卡斯伯',
};

farm.chick = 15;

console.log(farm);

Console 就會顯示 {farmer: “卡斯伯”, chick: 15}

「讀取」物件中「某一屬性的值」

要讀取「物件的“屬性值”」，有兩種方式：

以此物件作為範例：

var person = {
    firstName: 'Taylor',
    lastName: 'Swift',
    song: 'lovestory'
}

現在我要讀取的是「person物件中的firstName屬性」

🎃 方式一：

person.firstName

🎃 方式二：

person['firstName']

📖 詳細教學請看 JavaScript Objects

現在，我想要讀取物件中「chick」的值是多少

作法如下

JS:

🎃 使用「console.log(farm.chick);」，就可以在 Console 顯示「chick」的值

var farm = {
    farmer: '卡斯伯',
};

farm.chick = 15;

// 讀取物件中「chick」的值是多少
console.log(farm.chick);

Console 就會顯示「chick」的值 = 15

「修改」物件中「某一屬性的值」

原本，chick 的值是「15」，我想要把它改成「30」

JS:

🎃 使用farm.chick = 30;來把 chick 的值改成「30」

var farm = {
    farmer: '卡斯伯',
    chick: 15,
};

// 「修改」物件的值
farm.chick = 30;

// 讀取物件中「chick」的值是多少
console.log(farm.chick);

chick 的值改成「30」了

「讀取」物件中「屬性的“第一個值”」

JS:

var farm = {
    farmer: '卡斯伯',
    chick: 15,
    dog: ['張姆士', '龐的'],
};

現在，我想要讀取「屬性dog」的“第一個值”，也就是'張姆士'

作法如下

🎃 在console.log()，如果只有寫「farm.dog」

var farm = {
    farmer: '卡斯伯',
    chick: 15,
    dog: ['張姆士', '龐的'],
};


console.log(farm.dog);

就只會「指向dog的 array」而已

撈出「屬性的 array 的“第一個值”」

🎃 在console.log()要寫farm.dog[0]，才能撈出「dog陣列的“第一個值”」

JS:

var farm = {
    farmer: '卡斯伯',
    chick: 15,
    dog: ['張姆士', '龐的'],
};

console.log(farm.dog[0]);

在 Console 就會顯示「dog陣列的“第一個值”」= '張姆士'

🎃 建立一個新的變數，來記錄「dog陣列的“第一個值”」= '張姆士'

JS:

• 我建立一個新的變數dog1，來記錄「dog陣列的“第一個值”」= '張姆士'

var farm = {
    farmer: '卡斯伯',
    chick: 15,
    dog: ['張姆士', '龐的'],
};

var dog1 = farm.dog[0];

console.log('我農場裡的第一隻狗叫做 ' + dog1);

物件裡面，再放入「物件」

物件裡面，也可以再放入「物件」

如下範例：

var bmiStatus = {
    fat: {
        class: 'red',
        color: 'red'
    },
    normal: {
        class: 'green',
        color: 'green'
    },
    thin: {
        class: 'blue',
        color: 'blue'
    }
}