JavaScript 核心觀念(22)-物件-物件取值、新增、刪除

前言

接下來講講物件的取值、新增以及刪除吧。

物件取值

物件在取值時，主要有兩種方式

• 點運算子
• 中括號

首先先來講「點運算子」的做法，下方有一個物件範例程式碼

var obj = {
  myName: 'Ray',
  num: 1,
  family: {
    mon: '漂亮阿姨',
  },
  objFn: function() {
    console.log('漂亮阿姨回家囉');
  },
}

透過點運算子假使我們要取得 myName 只需要寫 obj.myName 即可。

而中括號取值方式則是 obj['myName'] 中括號取值裡面是使用字串的方式去取值，使用中括號取值的方式還有另一個好處，可以傳入變數來取值

var obj = {
  myName: 'Ray',
  num: 1,
  family: {
    mon: '漂亮阿姨',
  },
  objFn: function() {
    console.log('漂亮阿姨回家囉');
  },
}

var person = 'myName';
obj[person]; // Ray

這邊你可能會問那點運算子呢？這必須注意點運算子是無法支援這種寫法，當你使用 obj.person 是會出現錯誤的，因為它會從 obj 底下去找有沒有 person 這個屬性。

另外這邊要注意一件事情就是物件的屬性「一率都是一個字串」，因此範例程式碼有一個數字 1，在這邊看起來會像是一個 Number，但實際上是一個字串

var obj = {
  myName: 'Ray',
  num: 1,
  family: {
    mon: '漂亮阿姨',
  },
  objFn: function() {
    console.log('漂亮阿姨回家囉');
  },
  1: 'qq123',
}

你會發現使用點運算子 obj.1 是會出現 Uncaught SyntaxError: Unexpected number 的錯誤，那可能會想說改用 obj.'1'，但其實這還是會出現 Uncaught SyntaxError: Unexpected string 得錯誤訊息，那這些錯誤原因是什麼呢？這邊舉例 obj.1 來講，讓我們透過實際在 Chrome Console 來看它呈現的樣式

這邊假設來講我們在撰寫一個 Number 數字時，會呈現像這樣的淡綠色

但如果你使用點運算子並輸入一個 number 就會變成像這樣

若使用該方式你可以發現 . 後面若是數字就會是淡綠色，並且誤判成 Number，因此會建議使用中括號來取值。

那你可能會說為什麼撰寫 JavaScript 的時候，物件的屬性可以不撰寫字串？其主要原因是 JavaScript 雖然物件的屬性只能是一個字串，只要不是字串就會被強制轉成字串，也因為會被強制轉換成字串的關係，我們在開發時往往就會直接省略單雙引號，透過 JavaScript 的強制轉換成字串的技巧來撰寫物件。

也因此假使要執行物件中的方法，就可以透過以下兩種寫法來取值並執行囉

obj.objFn();
obj['objFn']();

物件新增

有時候我們物件在定義好後往往會發現，後面需要再新增物件進去，那麼新增的觀念其實是與取值差不多，主要還是透過點運算子或者是中括號，假使來講下方有一個範例程式碼，並且我要新增一些原本不存在的屬性與值進去就會向下方這樣寫

var obj = {
  myName: 'Ray',
}

obj.qq = '123';
obj['qq2'] = '456';
console.log(obj); // { myName: 'Ray', qq: '123', qq2: '456' }

物件刪除

最後一個就是物件刪除，在開發後面往往我們會需要刪除物件中特定的屬性，因此這邊就會使用一個方法 delete，這邊使用前面的範例程式碼來講，我要刪除剛剛加入的 qq 或是 qq2 的話就可以這樣刪除

var obj = {
  myName: 'Ray',
}

obj.qq = '123';
obj['qq2'] = '456';
console.log(obj); // { myName: 'Ray', qq: '123', qq2: '456' }

delete obj.qq
delete obj['qq2']
console.log(obj); // { myName: 'Ray' }

那麼以上這邊就是物件的取值、新增以及刪除的行為。

參考文獻

• 六角學院 - JavaScript 核心篇