[Day20] 物件的基础概念

今天来简单介绍关於物件的一些基本概念

物件的结构

我们可以利用 {} 中括号 来建立一个物件，物件内可以储存多组键值对，一组键值对以一个属性与一个值所组成，其中属性为字串型式，值则可为任何资料型式，且多个键值对以逗号做分隔，而物件可使用物件实字或建构式来宣告物件

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 物件基础概念