今天來簡單介紹關於物件的一些基本概念

物件的結構

我們可以利用 {} 中括號 來建立一個物件，物件內可以儲存多組鍵值對，一組鍵值對以一個屬性與一個值所組成，其中屬性為字串型式，值則可為任何資料型式，且多個鍵值對以逗號做分隔，而物件可使用物件實字或建構式來宣告物件

const obj = {
    property1: value1, // 屬性: 值
    property2: value2
}

// 物件可包含多組鍵值對，不同鍵值對以逗號做分隔

使用物件實字宣告物件

以下範例為使用物件實字 (Object Literals) 來宣告的物件結構

{
    property1: value1,
    property2: value2
}

// 物件內可以儲存多組鍵值對，屬性為字串型式，值則可為任何資料型式

const family = {
    name: 'Carol',
    wallet: 1000,
    members: {
        mom: '老媽',
        dad: '老爸'
    },
    callFamily: function() {
     console.log('呼叫 Carol 家');
    }
};

使用物件建構式來宣告物件

以下範例利用物件建構式來宣告物件

const family = {
    mom: '老媽'
};

const obj = new Object();
const newFamily = new Object(family);

console.log(obj); // {}
console.log(newFamily); // {mom: '老媽'}

需要注意的是：物件建構式會因傳入的資料非物件，得出不同結果

const obj = {
    '1': '1',
};

const obj1 = new Object(obj);
const obj2 = new Object(1);
const obj3 = new Object('1');

console.log(obj1); // {1: '1'}
console.log(obj2); // Number {1}
console.log(obj3); // String {'1'}

console.log(obj1 + 2); // [object Object]2
console.log(obj2 + 2); // 3
console.log(obj3 + 2); // 12

物件的取值、新增、刪除

物件可以利用 . 點記法 （Dot notation） 或 [] 括弧記法 （Bracket notation） 來做取值、新增等動作

物件的取值

利用 . 點記法 取值

const family = {
    name: 'Carol',
    wallet: 1000,
    members: {
        mom: '老媽',
        dad: '老爸'
    },
    callFamily: function() {
     console.log('呼叫 Carol 家');
    }
};

console.log(family.name); // Carol
console.log(family.members); // {mom: '老媽', dad: '老爸'}

// 呼叫物件中函式
family.callFamily();

注意 . 點記法 不可用字串或變數取值

const data = {
    1: '3',
};
console.log(data.1); // 報錯 - Uncaught SyntaxError: missing ) after argument list

const data = {
    'a': '1',
};
console.log(data.'a'); // 報錯 - Uncaught SyntaxError: Unexpected string

利用 [] 括弧記法 取值

範例1

const family = {
    name: 'Carol',
    wallet: 1000,
    members: {
        mom: '老媽',
        dad: '老爸'
    },
    callFamily: function() {
     console.log('呼叫 Carol 家');
    }
};

console.log(family['name']); // Carol
console.log(family[name]); // Carol

// 使用變數取值 
const callMember = 'mom';
console.log(family.members[callMember]); // 老媽

// 呼叫物件中函式
family['callFamily']();

範例2

雖然 1: '3' 的 1 看起來是數字，但其實是字串，而 [] 括弧記法 可以用字串來取值

const data = {
    1: '3',
    '2': '4',
};
console.log(data[1]); // 3
console.log(data[2]); // 4

範例3

因 [] 括弧記法 可以用字串來取值，所以可以使用特殊字元取值

const data = {
    '$-Carol家': '$$$$'
};
console.log(data['$-Carol家']); // $$$$

物件的新增

利用 . 點記法 新增

const family = {
    name: 'Carol',
    wallet: 1000,
};

family.petNum = 2,

console.log(family);
// {name: 'Carol', wallet: 1000, petNum: 2}

利用 [] 括弧記法 新增

const family = {
    name: 'Carol',
};

family['petNum'] = 2,
family['$-wallet'] = 2000,

console.log(family);
// {name: 'Carol', petNum: 2, $-wallet: 2000}

物件的刪除

接下來使用 delete 運算子 來刪除物件

const family = {
    name: 'Carol',
    wallet: 1000,
    members: {
        mom: '老媽',
        dad: '老爸'
    },
};

delete family.members;
console.log(family); // {name: 'Carol', wallet: 1000}

delete family['wallet'];
console.log(family); // {name: 'Carol'}

補充 - 變數與物件屬性的差異

變數與物件屬性的差異就是 - 變數無法被刪除，屬性才可以被刪除

以以下程式碼為例：

window 為瀏覽器的根物件，利用 console.log(window); 在 Chrome 的 console 打開後可看到許多屬性，在屬性中可看到範例中所宣告的 變數 a，而 b 雖然未使用 var 做宣告但也可看到在其中，需要知道的是 a 是一個變數，而 b = 2 等同 window.b = 2，因此 b 是 window 的屬性而非變數

var a = 1;
b = 2,
console.log(window);

可以利用 delete 運算子 (因表達式所以會回傳) 所回傳的值來看是否可被刪除

變數 a 因為是變數所以不可被刪除，返回 false

var a = 1;

delete a // 表達式回傳 false

console.log(a); // 1

因 b 是屬性，可被刪除，故返回 true，最後因 b 已被刪除找不到，所以報錯 - b is not defined

b = 2,

delete b // 表達式回傳 true

console.log(b); // 報錯 - Uncaught ReferenceError: b is not defined

參考文獻

六角學院 - JavaScript 核心篇

MDN - JavaScript 物件基礎概念