深入浅出！解锁JS可选链操作符和双问号操作符的神奇力量

2023-08-09 02:46:49

解锁 JavaScript 中的安全对象访问：可选链和双问号操作符

在 JavaScript 中，优雅地访问嵌套对象的属性至关重要，特别是当这些属性可能为 null 或 undefined 时。使用可选链 (?.) 和双问号 (??) 操作符，我们可以安全可靠地处理这些情况，避免错误和代码中断。

1. 可选链操作符：优雅地处理 Null 和 Undefined

可选链操作符 (?.）让我们能够安全地访问对象属性，无需担心它们是否为 null 或 undefined。它的语法很简单：

object?.property

如果 object 不为 null 或 undefined，它将返回 object 的 property 属性值。否则，它将返回 undefined，避免因访问不存在的属性而导致的错误。

示例：

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

console.log(person.address.street); // 123 Main Street
console.log(person.address.zipCode); // undefined

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

在上面的示例中，person.address.street 是有效的，因为它存在于对象中。person.address.zipCode 不存在，因此返回 undefined。person?.address?.zipCode 使用可选链操作符安全地访问属性，如果不存在则返回 undefined，避免了错误。

2. 双问号操作符：指定默认值

双问号操作符 (??) 是可选链操作符的扩展，允许我们为 null 或 undefined 的值指定一个默认值。它的语法如下：

object?.property ?? defaultValue

如果 object 不为 null 或 undefined，它将返回 object 的 property 属性值。否则，它将返回 defaultValue。

示例：

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

console.log(person.address.zipCode ?? 'N/A'); // N/A