(Day10) 物件基礎介紹

前言

物件 在 JS 是十分重要的，並且關於物件有幾個滿重要的特性：

• 物件傳參考
• 物件深層/淺層 複製

不過在這之前先來介紹物件基礎概念及操作 （混文章）

物件結構

物件是有以下東西組成的：

• 物件最外層的 {} 一般稱作物件實字 (Object Literals)。
• 再來是物件實字中的內容是由 屬性(property) / 值(value) 組成。

而物件的值可以是任何純值、陣列、物件本身以及函式：

var school = {
	name:'Taipei University',
	age:45,
	vacation:true,
  teacher:['Mike','Lisha','Bob'],
	classes: {
		student:['Kevin','Clara','Rose'],
	},
	broadcast:function(){
		console.log('學校廣播');
	}
}

物件取值

在 JS有兩種方法可以獲得物件中的值:

• 使用 . 點運算子
• 使用中刮號 []

var school = {
	name:'Taipei University',
	age:45,
	vacation:true,
  teacher:['Mike','Lisha','Bob'],
	classes: {
		student:['Kevin','Clara','Rose'],
	},
	broadcast:function(){
		console.log('學校廣播');
	}
}
school.name //Taipei University
school['age'] //45

使用 [] 方法取值，有個好處，是可以透過變數替換 [] 中的值，來取出物件中不同的值，也就是：

var school = {
	name:'Taipei University',
	age:45,
	vacation:true,
  teacher:['Mike','Lisha','Bob'],
	classes: {
		student:['Kevin','Clara','Rose'],
	},
	broadcast:function(){
		console.log('學校廣播');
	}
}
var test ='name'
console.log(school[test]) // Taipei University
test = 'age'
console.log(school[test]) // 45

而這個特性 使用 . 運算子，便無法達成了，按照上面範例使用 school.test 他會回傳 undefined 。

值得一題的是物件中的屬性都會是字串，當屬性不是字串時， JS 會自動將物件屬性強制轉成字串，因此我們實際上在建立物件時，通常會直接忽略屬性要寫成字串這點。

也因此物件屬性是能添加某些特殊符號，不過是只能使用 [] 來取值的，而 . 運算子則無法正確使用。

var obj= {
	'obj-test':'測試文字'
}
obj.obj-test // test is not defined
obj['obj-test'] //測試文字

新增屬性

實際上若要在物件新增屬性，方法就跟物件取值一樣使用 . 運算子或是 [] 指向新屬性，接著再使用 = 為該屬性賦值。

var school = {
	name:'Taipei University',
	age:45,
	vacation:true,
  teacher:['Mike','Lisha','Bob'],
	classes: {
		student:['Kevin','Clara','Rose'],
	},
	broadcast:function(){
		console.log('學校廣播');
	}
}
school.phoneNumber = '02-4050331'
school['address'] = '台北市中正區北平西路3號'
console.log(school.phoneNumber,school['address']) // '02-4050331' , '台北市中正區北平西路3號'

刪除屬性

要刪除屬性也很簡單，直接使用一元運算子 delete 再使用 . 或 [] 指向要刪除的屬性。

var school = {
	name:'Taipei University',
	age:45,
	vacation:true,
  teacher:['Mike','Lisha','Bob'],
	classes: {
		student:['Kevin','Clara','Rose'],
	},
	broadcast:function(){
		console.log('學校廣播');
	}
}
delete school.age
console.log(school.age) //undefined

ES6 物件函式縮寫

上面有提到物件中也能使用函式，正確的寫法會是

var school = {
	broadcast:function(){
		console.log('學校廣播');
	}
}
school.broadcast() // 學校廣播

而 ES6 則為物件函式提供了縮寫，可以省略 :function 直接寫成 :

var school = {
	broadcast(){
		console.log('學校廣播');
	}
}
school.broadcast() // 學校廣播

在使用一些大型框架時會很常看到這個縮寫方法。

參考資料

• JavaScript 核心篇 (六角學院）