如何在 JavaScript 中读取对象的值

在 JavaScript 中，我们可以定义一个对象来表示一组数据，例如：

let person = {
  name: 'Alice',
  age: 28,
  hobbies: ['reading', 'traveling', 'yoga'],
  address: {
    city: 'New York',
    street: 'Broadway'
  }
};

如何读取这个对象的值呢？下面是一些常用的方法。

1. 使用点号访问属性

我们可以使用点号来访问对象的属性，例如：

console.log(person.name); // output: Alice
console.log(person.age); // output: 28
console.log(person.hobbies); // output: ['reading', 'traveling', 'yoga']
console.log(person.address.city); // output: New York
console.log(person.address.street); // output: Broadway

点号的方式适用于属性名是合法的标识符的情况。

2. 使用方括号访问属性

如果属性名不是合法的标识符，或者我们需要动态计算属性名，可以使用方括号来访问属性。

console.log(person['name']); // output: Alice
console.log(person['age']); // output: 28
let prop = 'hobbies';
console.log(person[prop]); // output: ['reading', 'traveling', 'yoga']
console.log(person['address']['city']); // output: New York
console.log(person['address']['street']); // output: Broadway

注意，在使用方括号访问属性时，属性名必须用引号括起来（单引号或双引号均可）。

3. 使用可选链运算符

在使用点号或方括号访问属性时，如果对象中不存在该属性，会返回 undefined。而在访问属性的属性时，如果中间某个属性为 null 或 undefined，会导致程序异常。

从 ECMAScript 2020 开始，可以使用可选链运算符 ?. 来解决这个问题。这个运算符可以在对象的某个属性可能不存在的情况下安全地访问。

console.log(person?.name); // output: Alice
console.log(person?.age); // output: 28
console.log(person?.hobbies); // output: ['reading', 'traveling', 'yoga']
console.log(person?.address?.city); // output: New York
console.log(person?.address?.street); // output: Broadway
console.log(person?.foo?.bar?.baz); // output: undefined

注意，在使用可选链运算符时，如果对象为 null 或 undefined，直接返回 undefined。

4. 使用解构赋值

可以使用解构赋值来快速获取对象的某些属性值。

let {name, age} = person;
console.log(name); // output: Alice
console.log(age); // output: 28

也可以使用解构赋值嵌套获取属性值。

let {city, street} = person.address;
console.log(city); // output: New York
console.log(street); // output: Broadway

使用嵌套的解构赋值时，要注意中间的属性必须存在，否则会抛出异常。

以上就是 JavaScript 中读取对象的值的一些常用方法，希望对大家有所帮助。