JavaScript對象屬性

找出所有您需要了解的關於JavaScript對象屬性的信息

JavaScript對象具有由與值關聯的標籤組成的屬性。

我們看到的對象文字語法:

const car = {

}

讓我們定義如下屬性:

const car = {
  color: 'blue'
}

在這裡,我們有一個car具有名為屬性的對象color,具有價值blue

標籤可以是任何字符串。請注意,我並沒有使用引號color,但是如果我想在屬性名稱中包含一個無效的字符作為變量名,則必須:

const car = {
  color: 'blue',
  'the color': 'blue'
}

這意味著空格,連字符和更多特殊字符。

如您所見,我們用逗號分隔每個屬性。

檢索財產的價值

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

首先是點表示法

car.color //'blue'

第二種是使用無效名稱的屬性所必需的,第二種是使用方括號:

car['the color'] //'blue'

如果您訪問不存在的媒體資源,則會得到undefined

car.brand //undefined

檢查屬性值但默認為預定義值的一種好方法是使用||操作員:

const brand = car.brand || 'ford'

如前所述,對象可以將嵌套對像作為屬性:

const car = {
  brand: {
    name: 'Ford'
  },
  color: 'blue'
}

您可以使用以下方式訪問品牌名稱

car.brand.name

或者

car['brand']['name']

甚至混合:

car.brand['name']
car['brand'].name

設置屬性的值

如上所見,您可以在定義對象時設置屬性的值。

但是您隨時可以在以後進行更新:

const car = {
  color: 'blue'
}

car.color = ‘yellow’ car[‘color’] = ‘red’

您還可以向對象添加新屬性:

car.model = 'Fiesta'

car.model //‘Fiesta’

如何刪除財產

給定對象

const car = {
  color: 'blue',
  brand: 'Ford'
}

您可以使用以下命令從此對像中刪除屬性

delete car.brand

Delete a property from an object in JavaScript

它的工作方式還表示為:

delete car['brand']
delete car.brand
delete newCar['brand']

將屬性設置為undefined

如果您需要以非常優化的方式執行此操作,例如,當您在循環中對大量對象進行操作時,另一種選擇是將該屬性設置為undefined

由於其性質,delete是一個慢很多而不是簡單地重新分配undefined,速度降低了50倍以上。

但是,請記住,該屬性不會從對像中刪除。它的值被擦除了,但是如果您迭代該對象,它仍然存在:

Iterate over the object

使用delete仍然非常快,只有在您有充分理由這樣做時,才應研究此類性能問題,否則始終首選具有更清晰的語義和功能。

刪除屬性而不更改對象

如果需要考慮可變性,則可以通過複製舊屬性中的所有屬性來創建一個全新的對象,但要刪除的屬性除外:

const car = {
  color: 'blue',
  brand: 'Ford'
}
const prop = 'color'

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

Create a new object without mutating the original

如何計算JavaScript對像中的屬性數量

使用Object.keys()方法,傳遞要檢查的對象,以獲取對象的所有(自有)可枚舉屬性的數組。

然後通過檢查length財產:

const car = {
  color: 'Blue',
  brand: 'Ford',
  model: 'Fiesta'
}

Object.keys(car).length

我說了無數的屬性。這意味著它們的內部可枚舉標誌設置為true,這是默認設置。檢查MDN有關此主題的更多信息。

如何檢查JavaScript對象屬性是否未定義

在JavaScript程序中,檢查對象屬性是否未定義的正確方法是使用typeof操作員。

typeof返回一個告訴操作數類型的字符串。它使用時不帶括號,將您要檢查的任何值傳遞給它:

const list = []
const count = 2

typeof list //“object” typeof count //“number” typeof “test” //“string” typeof color //“undefined”

如果未定義該值,typeof返回“未定義”細繩

現在假設您有一個car對象,只有一個屬性:

const car = {
  model: 'Fiesta'
}

這是您檢查是否color屬性在此對像上定義:

if (typeof car.color === 'undefined') {
  // color is undefined
}

動態特性

定義屬性時,如果用方括號括起來,則其標籤可以是表達式:

const car = {
  ['c' + 'o' + 'lor']: 'blue'
}

car.color //‘blue’

更簡單的語法將變量包括為對象屬性

而不是做

const something = 'y'
const x = {
  something: something
}

您可以使用以下簡化方式:

const something = 'y'
const x = {
  something
}

免費下載我的JavaScript初學者手冊


更多js教程: