JavaScript对象属性的实例教程

JavaScript对象有属性，它是由一个与值相关的标签组成。

我们看到的对象字面语法。

让我们可以像这样定义属性。

const car = {
  color: 'blue'
}

这里我们有一个car 对象，有一个名为color 的属性，值为blue 。

标签可以是任何字符串。注意，我没有在color ，但如果我想在属性名中包含一个不能作为变量名的字符，我就必须这样做。

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

这意味着空格、连字符，以及更多的特殊字符。

正如你所看到的，我们用逗号来分隔每个属性。

检索一个属性的值

我们可以用两种不同的语法来检索一个属性的值。

第一种是点符号。

第二种是使用方括号，这对名称无效的属性是强制性的。

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

如果你访问一个不存在的属性，你会得到undefined 。

检查一个属性值但默认为预定义值的一个好方法是使用|| 操作符。

const brand = car.brand || 'ford'

正如所说，对象可以有嵌套的对象作为属性。

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

你可以用以下方法访问品牌名称

或

或者甚至混合。

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 car.brand
delete newCar['brand']

将一个属性设置为未定义

如果你需要以一种非常优化的方式来执行这个操作，例如，当你在循环中对大量的对象进行操作时，另一个选择是将属性设置为undefined 。

由于它的性质，delete 的性能比简单地重新赋值到undefined要慢得多，慢了50倍以上。

然而，请记住，该属性并没有从对象中删除。它的值被抹去了，但如果你迭代对象，它仍然存在。

使用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
}, {})

如何计算一个JavaScript对象中的属性数量

使用Object.keys() 方法，通过你想检查的对象，得到该对象的所有（自己的）可枚举属性的数组。

然后通过检查length 属性来计算该数组的长度。

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

Object.keys(car).length

我说的是可枚举属性。这意味着它们的内部可枚举标志被设置为真，这是默认的。检查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
}