JavaScript 可选链：简化访问嵌套属性的利器｜青训营ECMAScript 2020 中引入了可选链操作符（O

ECMAScript 2020 中引入了可选链操作符（Optional Chaining Operator），允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。

可选链的作用

在讨论可选链之前，让我们先看一个常见的问题。假设我们有一个包含多个嵌套对象的数据结构，如下所示：

const user = {
  name: 'John',
  address: {
    street: '123 Main St',
    city: 'New York',
    country: 'USA'
  }
};

现在，我们想要获取用户的街道地址。在没有可选链的情况下，我们可能会这样写：

const street = user.address.street;

这看起来很简单，但是如果 user 对象中的 address 属性不存在时，上述代码会抛出一个 TypeError 错误，因为我们无法从 undefined 上获取 street 属性。

为了避免这种错误，我们通常需要添加一些额外的条件语句来检查属性是否存在：

let street;
if (user && user.address) {
  street = user.address.street;
}

这样做确实可以解决问题，但是代码变得更加冗长，可读性也下降了。这时，可选链操作符就派上了用场。

可选链操作符的语法和用法

可选链操作符 ?. 可以在访问对象的属性或调用方法时，简化对属性或方法是否存在的检查。它的语法如下：

obj?.prop
obj?.[expr]
obj?.method()

如果 obj 存在且不为 null 或 undefined，则返回对应的属性值或方法调用结果；否则，返回 undefined。

现在，我们可以使用可选链操作符来简化上述的示例代码：

const street = user?.address?.street;

这样，即使 user 对象或 address 属性不存在，我们也可以安全地获取 street 属性。如果其中任何一个属性不存在，表达式的结果将为 undefined，而不会导致错误。

可选链的高级用法

可选链不仅仅适用于对象属性的访问，还可以用于数组的索引和函数的调用。

数组的可选链

假设我们有以下数组：

const data = [1, [2, [3, [4, [5]]]]];

我们想要获取数组中的第一个元素和第二个元素的第一个元素。使用可选链，我们可以这样做：

const firstElement = data?.[0];
const secondElement = data?.[1]?.[0];

这样，即使数组中的某个索引不存在，我们也可以安全地访问它们的值。

函数的可选链

当我们尝试调用一个可能不存在的函数时，可选链同样适用。假设我们有一个对象 calculator，其中包含一个可选的 add 方法：

const calculator = {
  multiply: (a, b) => a * b
};

我们可以使用可选链来调用 add 方法，即使它可能不存在：

const result = calculator?.add?.(2, 3);

如果 add 方法存在，则会返回计算结果；否则，结果将为 undefined。

兼容性考虑

可选链操作符是在 ECMAScript 2020 中引入的新特性，因此在使用之前，我们需要确保目标环境支持它。大多数现代浏览器和 Node.js 版本都已经支持可选链操作符，但是在一些旧版本中可能不被支持。在开发过程中，我们可以使用 Babel 等工具来转译代码，以确保兼容性。

总结

JavaScript 的可选链操作符提供了一种简洁而安全的方式来访问嵌套对象或数组的属性和方法。它能够减少冗长的条件语句，提高代码的可读性和可维护性。无论是访问对象的属性、数组的元素，还是调用函数，可选链都能够帮助我们更加优雅地处理可能不存在的情况。尽管在某些旧版本的环境中可能不被支持，但在大多数现代环境中，可选链操作符已经成为 JavaScript 开发中的一项强大工具。

JavaScript 可选链：简化访问嵌套属性的利器 ｜ 青训营