ES11 如何使用 optional chaining 语法简化代码

在前端开发中，我们经常会遇到处理嵌套对象的情况，例如从后端返回的 JSON 对象。对于这样的对象，我们通常需要使用 if 语句或者三元表达式来进行判断，以避免出现 undefined 或者 null 的错误。

然而，这种方式在代码中经常会出现大量的 if 判断语句或者链式操作，不仅代码复杂度高，而且容易出错。好在在 ES11 中，新增了一种 optional chaining 语法，可以帮助我们简化代码、提高可读性。

optional chaining 简介

optional chaining 可以用来简化对象属性的访问操作。它通过在属性名后面加一个问号（?）来表示，如果属性不存在或者为 null 或者 undefined，就不会访问这个属性。

比如下面的代码：

const userInfo = {
  name: 'Alice',
  contact: {
    email: 'alice@example.com'
  }
};

if (userInfo && userInfo.contact && userInfo.contact.email) {
  console.log(userInfo.contact.email);
}

我们需要对 userInfo、userInfo.contact 和 userInfo.contact.email 分别进行有效性判断，非常繁琐。使用 optional chaining 语法，我们可以简化成如下代码：

console.log(userInfo?.contact?.email);

以上代码中，使用了 ?. 这个符号表示，如果 contact 或 email 为空，就不会执行后续操作了。如果存在，就会正常访问并输出 email。

optional chaining 与 nullish coalescing 运算符结合使用

有时候我们需要在属性为空的时候，给出默认值。在 ES11 中，新增了一个 nullish coalescing 运算符，也可以用来处理这种情况。它表示如果左侧的值为 null 或 undefined，就会返回右侧的值。

结合 optional chaining，可以实现非常简单的判断和赋值操作。比如下面的例子：

const userInfo = {
  name: 'Alice',
  contact: {
    email: null
  }
};

const email = userInfo?.contact?.email ?? 'unknow';

console.log(email); // 输出：'unknown'

以上代码中，如果 email 为空，就会输出未知，否则输出 email 的值。

可选链的使用场景

可选链语法可以用在任何可以为空的操作上，包括函数、对象、数组等等。

对象

在处理嵌套对象的时候，可以使用 optional chaining 简化代码，提高可读性。

const user = {
  name: 'Alice',
  contact: {
    email: 'alice@example.com'
  }
};

const email = user?.contact?.email;

数组

在处理数组的时候，如果数组为空或者没有指定下标，可以使用 optional chaining 来判断。

const arr = [1, 2, 3];

console.log(arr[3]?.prop); // 不会报错，返回 undefined

函数

在调用函数时，如果函数不存在，可以使用 optional chaining 判断。

const func = obj?.fn();

总结

ES11 的可选链语法可以帮助我们简化代码，提高可读性。它可以用在任何可以为空的操作上，包括对象、数组、函数等等。在使用的时候，需要注意语法的正确使用和运算符的优先级，以避免出现错误。

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