在 ECMAScript 2020 中使用可选链式调用和空值合并运算符来优化代码

在前端开发中，我们经常需要处理 undefined 或 null 这类空值。在 ECMAScript 2020 中，可选链式调用和空值合并运算符成为了新增的语言特性，它们可以帮助我们更加方便地处理这些空值，提高代码的可读性和可维护性。本文将介绍可选链式调用和空值合并运算符的语法规则、使用方法以及优化代码的案例。

可选链式调用

可选链式调用可以在对象中访问深层属性时，避免因为 undefined 或 null 引起的错误。在过去，访问对象中的属性时，我们通常需要通过 if 判断来避免空值的情况。

例如：

if (obj && obj.prop1 && obj.prop1.prop2) {
  // do something 
}

在 ECMAScript 2020 中，我们可以使用可选链式调用来简化该写法，避免冗长的判断语句。

if (obj?.prop1?.prop2) {
  // do something
}

在可选链式调用中，通过对属性或函数调用的部分加上问号（?.）来表示只有该部分不是 undefined 或 null 时，才执行后续的方法或属性访问操作。

可选链式调用除了可以避免空值导致的错误，还可以提高代码的可读性和可维护性。例如在处理 JSON 数据时，我们可以直接通过以下方式获取嵌套层级的属性：

const result = json?.data?.list?.[0]?.name;

空值合并运算符

空值合并运算符可以用于给变量赋默认值，避免使用默认值时的冗长写法。在过去，我们使用 || 运算符来给变量赋默认值，但是当变量为 0 或者空字符串 '' 时，使用 || 运算符会有问题。

例如：

const name = user.name || 'Unknown'; // 当 name 属性不存在或为空字符串时，会导致赋值异常

在 ECMAScript 2020 中，我们可以使用空值合并运算符 ?? 来简化该写法。空值合并运算符只在左侧的变量为空值（null 或 undefined）时才会使用右侧的默认值。

const name = user.name ?? 'Unknown';

空值合并运算符的使用可以有效地避免因为空值引起的异常，而且语法更加简洁，可读性更高。

实际案例

在实际开发中，我们可以通过可选链式调用和空值合并运算符来优化代码，让代码更加简洁易读。

例如，下面代码中，最开始的判断主要因为需考虑 query，以及 query 的 seriesData 数据有无数据，代码出现了大量冗余。

function processData(params) {
  if (params.query && params.query.seriesData && params.query.seriesData.length > 0) {
    const result = params.query.seriesData;
    // do something 
  } else {
    // do something else
  }
}

我们可以使用可选链式调用对代码进行优化，简化判断条件。

function processData(params) {
  const result = params.query?.seriesData ?? [];
  if (result.length > 0) {
    // do something
  } else {
    // do something else
  }
}

可以看到，使用可选链式调用和空值合并运算符后，代码更加简洁，易于理解。同时，这种方式还可以避免空值带来的异常，给代码的健壮性提供了保障。

总结

在 ECMAScript 2020 中新增的可选链式调用和空值合并运算符是优化代码的利器，可以帮助我们避免因空值导致的异常，同时让代码显得更加简洁易懂。作为前端开发者，理解并灵活应用这两个语言特性，是提高开发效率和代码质量的重要手段。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6497ccea48841e98944d3394