如何在 JavaScript 中读取对象的属性？

在 JavaScript 中，对象是一种复合值，可以包含多个不同属性。读取对象的属性是其中一项基本的操作。

读取对象属性的语法

读取对象属性的语法是通过对象名和属性名访问：

objectName.propertyName

或者使用方括号语法：

objectName['propertyName']

其中 objectName 是对象的名称或变量引用，propertyName 是属性名称或变量引用。

读取对象属性的示例

下面是一些读取对象属性的示例：

const person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    zip: '12345',
  },
};

console.log(person.name); // 'John'
console.log(person['age']); // 30
console.log(person.address.street); // '123 Main St'
console.log(person['address']['city']); // 'Anytown'

const propertyName = 'zip';
console.log(person.address[propertyName]); // '12345'

判断对象属性是否存在

可以使用 in 操作符来判断对象是否具有某个属性：

const person = { name: 'John', age: 30 };

console.log('name' in person); // true
console.log('address' in person); // false

还可以使用 hasOwnProperty 方法来判断对象自身是否具有某个属性：

const person = { name: 'John', age: 30 };

console.log(person.hasOwnProperty('name')); // true
console.log(person.hasOwnProperty('toString')); // false

hasOwnProperty 方法不会查找对象的原型链。

使用可选链运算符

在 ECMAScript 2020 中，可以使用可选链运算符（?.）来避免在访问对象属性时出现 undefined：

const person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
  },
};

console.log(person.address?.zip); // undefined

如果 address 属性不存在，则不会尝试访问 zip 属性，并返回 undefined。

结论

读取对象属性是 JavaScript 编程中的基本操作之一。通过 . 和 [] 运算符，可以轻松地访问对象属性。使用 in 操作符和 hasOwnProperty 方法可以判断对象是否具有某个属性。在 ECMAScript 2020 中，还可以使用可选链运算符来避免在访问对象属性时出现 undefined。