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教程: