前情提要

艾草：「来，既然要学习物件让我带你瞧瞧这个秘方。」

(从异空间拿出一张古老透着神秘光泽的纸。)

「如何炼制爱情灵药．．．？」

艾草：「对呀，看到底下这堆配方了吗？」

「呃... 蒲公英、洋甘菊等一堆杂七杂八的东西，你是不能整理一下吗？」

艾草：「来来来，跟着我学习物件。学完後试着整理看看吧 ～～ 」

(总觉得被推了一件奇怪的差事．．．)

物件

其实 JavaScript 很多东西都是由物件组成的唷，所以我们今天先来简单了解一下物件到底是什麽呢？

物件外层会由 {} 大括号包覆起来，物件内是属性的组合，每组属性间会由逗号区隔开，而属性包含 key / value 。

let obj = {
	key:'value'
}

我们如果要一次宣告一个变数来记录资料，会导致程序码很大坨，资料看起来很杂乱，这时候我们就可以使用物件把相关的东西包覆起来，当要取出来时，在使用物件取值的方式，把需要的东西取出来，物件就像我们存放资料的空间。

那让我们来学习物件如何取值吧！

物件取值

物件取值的方式有两种：点记法、括弧记法

点记法是最常使用的方法，顾名思义就是用 . 点的方式取值，只要用点先选取该物件名称，在选取该物件的属性名称 key ，就能得出 value 了。

let obj = {
	key:'value'
}
console.log(obj.key)//"value"

但点记法要特别留意的它无法选取前面是数字的物件，如下：

let obj = {
	001:"我是001的 value"
}
console.log(obj.001)//报错 Uncaught SyntaxError: missing ) after argument list

此时就要透过另一种方式：括弧记法，括弧记法是使用中括号的形式，并透过字串的方式取值。

let obj = {
	001:"我是001的 value",
	key:'value'
}
//透过括弧记法取数字
console.log(obj[001])//成功取出 "我是001的 value"
console.log(obj['001'])//undefined

//透过括弧记法取非数字
console.log(obj['key'])//成功取出 "value"
console.log(obj[key])//报错 key is not defined

请注意要取出数字型态时不用使用字串包覆，否则会无法成功取出，而其他情况要使用字串的方式取值。

括弧记法还可以使用带入变数的方式取值。

let obj = {
	name:"王小明"
}
let a = "name";
console.log(obj[a])//"王小明"

物件新增

物件新增时可透过点记法、括弧记法取值的方式，先命名一个自定义的属性名称後在赋予该属性值。

let obj = {};

//透过点记法新增属性
obj.key = 'value';
console.log(obj)//{key: "value"}

//透过括弧记法新增属性
obj['name'] = '王小明';
console.log(obj)//{key: "value", name: "王小明"}

物件修改

物件修改时可透过点记法、括弧记法取值的方式，选取要修改的属性名称，并赋予该属性名称新的值。

let obj = {
	name:"小花"
};

//透过点记法修改属性
obj.name = '大花';
console.log(obj)//{name: "大花"}

//透过括弧记法修改属性
obj['name'] = '王大花';
console.log(obj)//{name: "王大花"}

物件属性删除

使用 delete 操作，在 delete 後方放入想删除的属性。

let obj = {
	001:"我是001的 value",
	key:'value'
}
delete obj[001];
console.log(obj)//{key: "value"}

总结

物件

• 物件的属性包含 key / value
• 物件的选取可以使用点记法或括弧记法
• 括弧记法可以读取到数字、变数
• 想删除物件的属性可以使用 delete

小练习

请参考底下程序码，选出整理爱情灵药秘方时错误叙述的选项

let loveElixir = {
  flowers: ["dandelion", "chamomile", "stevia"],
  hotWater: "300ml",
  steepingTime: 5,
  seasoning: {
    honey: "5g",
  }
};

A 想要更改浸泡时间(steepingTime) 为 10 ，可以这样写 loveElixir.steepingTime = 10
B 想要在调味料(seasoning)内新增糖(sugar)5g，可以这样写 loveElixir['seasoning'].sugar = "5g"
C 想在花类(flowers)新增一笔艾草(mugwort)，可以这样写 loveElixir.flowers.push('mugwort')
D 想删除调味料(seasoning)内的蜂蜜(honey)属性，可以这样写 loveElixir.seasoning.honey = ""

解答：想删除物件的属性可以透过 delete 操作，选项 D 应该改成 delete loveElixir.seasoning.honey

参考文献

JavaScript 必修篇 - 前端修练全攻略（六角学院）