/

JavaScript物件屬性

JavaScript物件屬性

專案需要了解關於JavaScript物件屬性的所有資訊。

JavaScript物件 擁有屬性，結構是由標籤和數值所組成的。

我們所見到的物件文字語法：

1
2
3
const car = {

}

讓我們能夠像這樣定義屬性：

1
2
3
const car = {
 color: '藍色'
}

這裡我們有一個名為car的物件，擁有一個名為color，具有數值藍色的屬性。

標籤可以是任何字串。注意到我在color周圍沒有使用引號，但是如果我想要在屬性名稱中包含無法當作變數名稱的字元，我必須這樣寫：

1
2
3
4
const car = {
 color: '藍色',
 'the color': '藍色'
}

這意味著空格、連字號和其他特殊字元。

就像你看到的，我們用逗號分隔每個屬性。

檢索屬性的數值

我們可以使用2種不同的語法檢索屬性的數值。

第一種是點表示法：

1
car.color //'藍色'

第二種，適用於具有無效名稱的屬性，是使用方括號：

1
car['the color'] //'藍色'

如果您存取一個不存在的屬性，您將得到 undefined：

1
car.brand //undefined

檢查屬性值但預設為預定義值的一個好方法是使用 || 運算子：

1
const brand = car.brand || '福特'

正如前面所述，物件可以擁有嵌套的物件作為屬性：

1
2
3
4
5
6
const car = {
 brand: {
 name: '福特'
 },
 color: '藍色'
}

您可以使用以下方法來訪問品牌名：

1
car.brand.name

或

1
car['brand']['name']

甚至可以混合使用：

1
2
car.brand['name']
car['brand'].name

設定屬性的數值

就像你在上面看到的，您可以在定義物件時設定屬性的數值。

但是您隨時可以稍後更新它：

1
2
3
4
5
6
const car = {
 color: '藍色'
}

car.color = '黃色'
car['color'] = '紅色'

您還可以向物件添加新屬性：

1
2
3
car.model = '節慶'

car.model //'節慶'

如何刪除屬性

假設有以下物件：

1
2
3
4
const car = {
 color: '藍色',
 brand: '福特'
}

您可以使用以下方法從該物件中刪除屬性：

1
delete car.brand

如下所示，也可以表示為：

1
2
3
delete car['brand']
delete car.brand
delete newCar['brand']

將屬性設定為undefined

如果您需要以非常優化的方式執行此操作，例如在迴圈中操作大量物件時，另一種選擇是將屬性設置為undefined。

由於其特性，進行delete操作的效能比單純將其重新賦值為undefined要慢很多 ，超過50倍的速度。

然而，請記住，該屬性並未從物件中刪除。它的數值被清除，但若您迭代物件，它仍然存在：

迭代物件

delete 的速度仍然很快，您只需要在有非常好的理由時才應該針對此類效能問題進行檢查，否則建議始終具有更明確的語義和功能。

在不更改物件的情況下刪除屬性

如果不可變性是您關心的問題，您可以通過從舊物件複製所有屬性（除了要刪除的屬性）來創建一個全新的物件：

1
2
3
4
5
6
7
8
9
10
11
12
const car = {
 color: '藍色',
 brand: '福特'
}
const prop = 'color'

const newCar = Object.keys(car).reduce((object, key) => {
 if (key !== prop) {
 object[key] = car[key]
 }
 return object
}, {})

創建一個新物件而不修改原本的物件

如何計算JavaScript物件中的屬性數量

使用Object.keys() 方法，將要檢查的物件作為參數傳入，以獲取物件的所有（自有）可列舉屬性的陣列。

然後通過檢查 length 屬性計算該陣列的長度：

1
2
3
4
5
6
7
const car = {
 color: '藍色',
 brand: '福特',
 model: '節慶'
}

Object.keys(car).length

我所說的可列舉屬性，表示其內部的enumerable標誌被設置為true，這是預設的。有關更多信息，請查看MDN。

如何檢查JavaScript物件屬性是否為undefined

在JavaScript程式中，檢查物件屬性是否為undefined的正確方法是使用typeof運算子。

typeof返回一個字串，告訴我們操作數的型態。它無需使用括號，只需將任意要檢查的值傳遞給它即可：

1
2
3
4
5
6
7
8
const list = []
const count = 2

typeof list //"object"
typeof count //"number"
typeof "test" //"string"

typeof color //"undefined"

如果該值未被定義，typeof將返回 undefined 這個字串。

現在假設您有一個僅有一個屬性的car物件：

1
2
3
const car = {
 model: '節慶'
}

這是您檢查在該物件上是否已定義color屬性的方法：

1
2
3
if (typeof car.color === 'undefined') {
 // color是undefined
}

動態屬性

在定義屬性時，如果將其標籤包裹在方括號中，則其標籤可以是一個表達式：

1
2
3
4
5
const car = {
 ['c' + 'o' + 'lor']: '藍色'
}

car.color //'藍色'

簡化的語法將變數作為物件的屬性

與其這樣做：

1
2
3
4
const something = 'y'
const x = {
 something: something
}

您可以簡化為：

1
2
3
4
const something = 'y'
const x = {
 something
}

tags: [“JavaScript”, “Object Properties”, “Syntax”]