可选链操作符 (?.)：解救复杂代码的利器

2023-11-14 18:12:45

在前后端分离的开发模式下，前端工程师通常通过调用 API 获取数据，而非直接操作数据库。虽然这极大地方便了开发，但也带来了新的挑战。

传统的 JavaScript 代码中，如果一个对象不存在或其属性为 undefined，则访问该属性会导致错误。为了解决这个问题，开发人员需要使用复杂的条件判断和错误处理机制。

可选链操作符 (?.) 应运而生，它提供了一种简洁优雅的方式来处理可能不存在或为 undefined 的属性。它允许开发人员在不使用传统条件判断的情况下安全地访问嵌套对象。

语法

可选链操作符 (?.) 的语法如下：

object?.property

其中：

object：要访问的原始对象。
property：要访问的属性。

用法

可选链操作符 (?.) 可以用于任何对象属性的访问，包括嵌套属性。如果对象或其属性存在且不为 undefined，则返回属性值。否则，返回 undefined，而不会抛出错误。

优点

使用可选链操作符 (?.) 有以下优点：

简化代码：与使用传统条件判断相比，可选链操作符可以显著简化代码。
提高可读性：可选链操作符使代码更加可读和易于理解。
减少错误：可选链操作符可以防止因访问不存在的属性而导致的错误。
提高性能：可选链操作符比传统条件判断更有效率，因为它避免了不必要的属性检查。

示例

以下示例演示如何使用可选链操作符 (?.) 访问嵌套对象属性：

const user = {
  name: 'John Doe',
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
  },
};

// 使用传统条件判断
if (user && user.address && user.address.state) {
  console.log(user.address.state); // 'CA'
}

// 使用可选链操作符
console.log(user?.address?.state); // 'CA'