iT邦幫忙

2021 iThome 鐵人賽

DAY 17
1
自我挑戰組

JavaScript 核心觀念系列 第 17

【Day17】物件結構與存取

物件宣告

物件內容為一個屬性 (property)對應一個值 (value),

如果要在後方添加新的屬性和值時,可用逗號(,)隔開,

物件有兩種方式可以宣告,分別為物件實字和建構式的方式來宣告,

一般情況下比較推薦使用物件實字的方式來宣告變數

物件實字 (Obiect literals)

當我們使用 {} 來建立物件時,就稱之為物件實字 (Obiect literals)

建構式

我們可以使用 new Object() 來宣告物件,

但如果 () 內不是物件時,會轉變成其他的包裹物件

範例:

// 物件實字
const obj = {};

const family = {
    // name 為屬性,'weiwei' 為值
    myName: 'weiwei',
    callMyName: function() {
        console.log('聯絡 weiwei');
    },
    members: {
        dad: '老爸',
        mom: '老媽',
    },
}

console.log(family);

// 建構式
let newFamily = new Object(family);

console.log(newFamily);

// 代入數字
newFamily = new Object(1);

console.log(newFamily);  // Number {1},數字包裹物件

// 代入字串
newFamily = new Object('1');

console.log(newFamily);  // String {'1'},字串包裹物件

物件存取

在 JavaScript 的物件中,存取的方式有兩種可以使用:

點記法 (Dot notation)

使用 . 再加上屬性名稱來存取物件內容

範例:

const family = {
    myName: 'weiwei',
    callMyName: function() {
        console.log('聯絡 weiwei');
    },
};

// 取值
console.log(family.myName);  // 'weiwei'
// 使用物件中的函式
console.log(family.callMyName());  // '聯絡 weiwei'

// 新增
family.mom = '老媽';
console.log(family.mom);  // '老媽'

// 修改原有屬性的值
family.myName = 'wei';
console.log(family.myName);  // 'wei'

// 刪除
delete family.mom
console.log(family);  // mom 被刪除
console.log(family.mom);  // undefined

當屬性為數字時,會出現錯誤

const a = {
    1: 123,
};

console.log(a.1);  // SyntaxError: Unexpected number

這時我們只能使用第二種方法來存取值

括弧記法 (Bracket notation)

[] 內加上屬性名稱來存取物件內容,

[] 的屬性名稱需使用單引號 (') 或雙引號 (") 將屬性圍住,

const family = {
    myName: 'weiwei',
    callMyName: function() {
        console.log('聯絡 weiwei');
    },
};

// 取值
console.log(family['myName']);  // 'weiwei'
// 使用物件中的函式
console.log(family['callMyName']());  // '聯絡 weiwei'

// 新增
family['mom'] = '老媽';
console.log(family['mom']);  // '老媽'

// 修改原有屬性的值
family['myName'] = 'wei';
console.log(family['myName']);  // 'wei'

// 刪除
delete family['mom']
console.log(family);  // mom 被刪除
console.log(family['mom']);  // undefined

當屬性為數字時,使用括弧記法 (Bracket notation) 不會出錯

const a = {
    1: 123,
};

// 取值
console.log(a[1]);  // 123

// 新增
a[5] = 456;
console.log(a[5]);  // 456

// 刪除
delete a[1];
console.log(a[1]);  // undefined

相關參考資料可到 MDN 參考文件查看

以上為物件的內容,感謝觀看!!


上一篇
【Day16】邏輯運算子及函式預設值
下一篇
【Day18】物件與純值
系列文
JavaScript 核心觀念30

尚未有邦友留言

立即登入留言