如何使用 ECMAScript 2020 中的 optional chaining 优化代码

简介

ECMAScript 2020 增加了 optional chaining 这个操作符，可以使开发者在访问对象和数组属性时，避免了因为空值或 undefined 导致程序崩溃的问题。本篇文章将介绍如何使用 optional chaining 优化代码。

optional chaining 的语法

ECMAScript 2020 定义了可选链式操作符（optional chaining），可以用来简化访问链的判空操作。

• 当访问对象属性或数组元素时可能会返回 undefined 或 null 值，此时再访问对象属性或数组元素将会抛出错误，导致程序运行失败；
• 可选链式操作符（?.）可以在属性或数组不进行判空判断时不抛出错误，而是直接返回 undefined 值。

// 1. 访问对象属性
obj?.prop;

// 2. 访问数组元素
arr?.[index];

optional chaining 的使用

1. 避免崩溃

当访问属性时，如果对象不存在，访问值将会返回 undefined 而不是抛出错误。

let user = null;

let name = user?.name; // undefined

alert(name); // undefined

2. 可选调用

当对象比较复杂时，联合调用会变得十分复杂，而可选调用则非常方便。

let elem = document.querySelector('#id')?.querySelector('.class');

如果 document.querySelector('#id') 返回 null 或 undefined，则后面的 querySelector 不会执行，elem 的值将是 undefined。

3. 引用链中的可选链

可选链可以用多个问号组合起来，在引用链中使用。

let user = {};

alert( user?.address?.street ); // undefined（user.address 不存在）

上面示例中，user 对象没有 address 属性，因此查询 user?.address 不会产生错误，他会返回 undefined 并停止执行。

示例代码

下面是一个使用 optional chaining 的示例代码：

const user = {
  name: 'Tom',
  email: 'tom@example.com',
  address: {
    city: 'Beijing',
    street: 'Xinjiekou',
    postcode: '10000'
  }
};

const userInfo = {
  name: user?.name,
  email: user?.email,
  address: user?.address?.city && user?.address?.street && user?.address?.postcode ? `${user?.address?.city} ${user?.address?.street} ${user?.address?.postcode}` : ''
};

在上面的代码中，我们使用了 optional chaining 进行判断 user 对象的属性是否存在，从而避免了因为空值或 undefined 导致程序崩溃的问题。

总结

在本篇文章中，我们介绍了如何使用 ECMAScript 2020 中的 optional chaining 优化代码，并提供了详细的语法及示例代码。使用 optional chaining 可以让我们更加方便和安全地访问对象和数组属性。在开发过程中，建议我们使用 optional chaining 进行代码优化，提高程序的健壮性和安全性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b31538add4f0e0ffc2647a