何謂物件取值？在什麼時機上會用到？

先來談談何謂物件？

在JavaScript中，所有基本型別( Primitive )以外的變數值，都是物件( Object )。

物件是 0 到多組屬性的集合。屬性是一對鍵( Key )與值( Value )的關聯，又稱 Key-Value pair。屬性的值可以是基本型別的字串、數字、布林…也可以是陣列、函式甚至是另一個物件。

當然物件也可以是瀏覽器或是執行環境是先定義好的，例如全域物件 window 或是用來取得日期的 Date 物件等等。

那要怎麼建立一個物件呢？

一般會使用「物件實字」的方式，或是透過 new 關鍵字建立物件。

物件實字( Object literal)

所謂的「物件實字」就是使用{}來建立一個新的物件，並指定屬性給物件。屬性之間以逗號( , )隔開，如果屬性名稱( key )有使用到符號字串則必須用 ''( 或是 "" )將 key 包起來。

這也是JSON格式的核心語法。

//使用「物件實字」建立一個郭靖(guoJing)的物件
let guoJing = {
	name: '郭靖',
	gender: 'male',
	kungFu: ['降龍十八掌','空明拳'],
	useKungFu: function () {
		alert(`${this.kungFu[0]}`);
	}
}

看看上面那張圖，鍵與值的配對關係就很清楚了。

在這裡小結一下：

key：就是屬性的名稱，任何字串都可以作為 key，
value：在 value 中可以放入任何型別的值，當然也包括物件。

透過 new 關鍵字建立物件

另一種方法則是透過 new 關鍵字建立物件，再把屬性一一指定給物件。範例如下：

let guoJing = new Object(); //建立物件
guoJing.name = '郭靖';  //指定屬性
guoJing.gender = 'male';
guoJing.kungFu = ['降龍十八掌','空明拳'],
guoJing.useKungFu: function () {
		alert(`${this.kungFu[0]}`);
	}

說到這裡，你應該對物件的結構十分了解了。所謂的「物件取值」，也就是要把物件的「值」給取出來，那要怎麼做呢？可以使用這兩種方法：

使用「.」(點)來存取屬性的值
透過 [ ] (中括號)來存取屬性的值

使用「.」(點)來存取屬性的值

透過「.」(點)來存取屬性的值是最單純方便的方式。語法如下：

物件名稱 .屬性名稱

以前面的範例來說明：

let guoJing = {
	name: '郭靖',
	gender: 'male',
	kungFu: ['降龍十八掌','空明拳'],
	useKungFu: function () {
		alert(`${this.kungFu[0]}`);
	}
}

console.log(guoJing.gender); //'male'
guoJing.useKungFu(); // 警告視窗跳出'降龍十八掌'

透過「.」(點)來存取屬性的值雖然方便直觀，但是也有它的限制，例如當物件的屬性名稱是數字或是特殊字元的時候，會出現錯誤，這時另一種存取物件屬性的方法就可以派上用場了。

透過 `[ ]` (中括號)來存取屬性的值

物件的屬性也可以使用 [ ] 來存取， [ ] 裡面可以放字串也可以帶入變數，語法如下：

物件["屬性名稱"]

先來看一下範例：

let guoJing = {
	name: '郭靖',
	gender: 'male',
	kungFu: ['降龍十八掌','空明拳'],
	useKungFu: function () {
		alert(`${this.kungFu[0]}`);
	}
}

console.log(guoJing['gender']); //'male'
guoJing['useKungFu'](); // 警告視窗跳出'降龍十八掌'

乍看之下 [ ] 跟用點 . 沒有兩樣，讓我們改一下題目，把 kungFu 這個陣列拆成 01kungFu 跟 02kungFu 兩個屬性。屬性名稱的開頭使用數字的話，程式會報錯。前面有提到只要是字串都可以當作屬性名稱，所以在這裡把 01kungFu 跟 02kungFu 這兩個屬性名稱加上 ''( "" ) ,讓它們變成字串，這時就不能使用點( . )來存取屬性了，而要改用可以放入字串的 [ ] 來取值。

let guoJing = {
  name: '郭靖',
  gender: 'male',
  '01kungFu': '降龍十八掌',
  '02kungFu': '空明拳',
  useKungFu: function () {
    alert(`${this['01kungFu']}`);
  }
};

console.log(guoJing["01kungFu"]);//"降龍十八掌"
console.log(guoJing["02kungFu"]);//"空明拳"

使用物件 ["屬性名稱"] 的方式就可以正常抓到屬性的值了。

前面提到中括號 [ ] 裡面可以放入變數，所以我們可以把屬性名稱賦值給變數，用物件 ["變數"] 的方法來取得屬性的值。

讓我們再用上面的例子做一些變化：

let guoJing = {
  name: '郭靖',
  gender: 'male',
  '01kungFu': '降龍十八掌',
  '02kungFu': '空明拳',
  useKungFu: function () {
    alert(`${this['01kungFu']}`);
  }
};

let sex = "gender";

console.log(guoJing.sex);//undefined
console.log(guoJing.gender);//"male"
console.log(guoJing[sex]);//"male"

sex 這個變數雖然存著 “ gender “ 這個值，但是和 guoJing 這個物件並非指向相同的記憶體空間，所以取不到 guoJing.gender 的值，直接報出了 “ undefined “。

而 guoJing[sex] 這裡sex變數存的是”gender”字串，所以 guoJing[sex] 等於 guoJing["gender"]，所以就成功取到 “ male “ 的值了。

新增物件屬性

如何新增物件的屬性呢？可以直接使用( . )也可以用 [ ] 的方式。

物件.屬性名稱 = 值;
物件[ '屬性名稱' ] = 值;

讓我們看看範例：

let guoJing = {
  name: '郭靖',
  gender: 'male',
  '01kungFu': '降龍十八掌',
  '02kungFu': '空明拳',
  useKungFu: function () {
    alert(`${this['01kungFu']}`);
  }
};

guoJing.wife = '黃蓉';
guoJing['pet'] = '白雕';
guoJing['03kungFu'] = '九陰真經';
console.log(guoJing);

刪除物件屬性

要刪除物件的屬性可以使用 delete 指令來刪除。