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

前言

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

物件取值

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

  • 點運算子
  • 中括號

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

1
2
3
4
5
6
7
8
9
10
var obj = {
myName: 'Ray',
num: 1,
family: {
mon: '漂亮阿姨',
},
objFn: function() {
console.log('漂亮阿姨回家囉');
},
}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var obj = {
myName: 'Ray',
num: 1,
family: {
mon: '漂亮阿姨',
},
objFn: function() {
console.log('漂亮阿姨回家囉');
},
}

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

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

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

1
2
3
4
5
6
7
8
9
10
11
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 的強制轉換成字串的技巧來撰寫物件。

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

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

物件新增

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

1
2
3
4
5
6
7
var obj = {
myName: 'Ray',
}

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

物件刪除

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

1
2
3
4
5
6
7
8
9
10
11
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' }

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

參考文獻

0%