【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 参考文件查看

以上为物件的内容,感谢观看!!


<<:  [Day8] 实作 - 敌人篇2

>>:  [Day29] 离 Google 服务又近一点 - shortcuts for Google

30天打造品牌特色电商网站 Day.11 CSS框架-Bootstrap5

昨天已经初步介绍几个简单常用的bootstrap语法, 今天来看看几个也是好用、比较详细或特殊的情况...

Day 20 - 天眼CNN 的耳朵和嘴巴 - RNN(1) -传统RNN

CNN 与 RNN 之间的差异? 1982 年在由大卫.赫索霍夫主演的电视影集《霹雳游侠》里,能自动...

[Day_22]函式与递回_(1)

函式的定义、传回值与呼叫 自订函式需要包含两个部分,分别式「函式的定义」与「函式的呼叫」。「函式的定...

Day12不可以坏坏!vue.js判断是否session

延续昨日 今天来使用一下我们的session吧!! 在mounted的范围接一下 session 这...

第二十天:Gradle task graph

Gradle 的其中一个强大特点,就是它了解任务间的相依性,可以在核心建立出图或树。这对於开发者来说...