使用 ECMA2021 新特性 Optional Chaining/Nullish Coalescing 规避代码空指针异常

在前端开发中，我们经常会遇到代码中的空指针异常，也就是在访问对象属性或调用方法时，如果对象为 null 或 undefined，就会抛出异常。这个异常不仅会导致程序崩溃，还会给调试带来很大的困难。

为了解决这个问题，ECMA2021 规定了两个新的操作符：Optional Chaining 和 Nullish Coalescing。它们可以有效地避免空指针异常，提高代码的健壮性。下面就具体介绍一下它们的作用和使用方法。

Optional Chaining

Optional Chaining（可选链）是一个新的操作符，用于简化访问嵌套对象属性的代码。在以前的版本中，我们需要通过 && 运算符判断对象是否存在，然后才能访问它的属性。例如：

if (obj && obj.prop && obj.prop.subprop) {
  // ...
}

这段代码非常冗长，而且容易出错。使用 Optional Chaining 可以简化它：

if (obj?.prop?.subprop) {
  // ...
}

上面的代码中，?. 就是 Optional Chaining 的操作符。如果 obj、obj.prop 或 obj.prop.subprop 中的任意一个是 null 或 undefined，它会直接返回 undefined，而不会抛出异常。如果都存在，就会返回 obj.prop.subprop 的值。

除了用在判断语句中，我们还可以使用 Optional Chaining 来访问对象属性，例如：

const value = obj?.prop?.subprop?.[0];

这个例子中，如果 obj、obj.prop、obj.prop.subprop 或 obj.prop.subprop[0] 中的任意一个是 null 或 undefined，value 就会被赋值为 undefined。

Nullish Coalescing

Nullish Coalescing（空值合并）也是一个新的操作符，用于取代繁琐的 null 判断代码。在以前的版本中，我们也需要通过 || 运算符判断变量是否为 null 或 undefined，然后才能赋默认值。例如：

const x = foo || 'default';

这段代码存在一个问题，那就是如果 foo 的值为假值（比如 ''、0、false、null 或 undefined），就会赋值为 'default'，而这不是我们所期望的。使用 Nullish Coalescing 可以解决这个问题：

const x = foo ?? 'default';

上面的代码中，?? 就是 Nullish Coalescing 的操作符。如果 foo 的值为 null 或 undefined，x 就会被赋值为 'default'，否则就是 foo 的值。

总结

Optional Chaining 和 Nullish Coalescing 都是非常实用的新特性，可以避免一些繁琐的判断和异常处理，提高代码的可读性和健壮性。但是，在使用它们时需要注意一些细节，比如：

• 需要使用最新版本的 JavaScript 引擎才能支持这两个操作符；
• 需要注意操作符的优先级和结合性，避免出现意料之外的结果；
• Optional Chaining 和 Nullish Coalescing 只能对 null 或 undefined 判断，对其他假值（比如 ''、0、false 等）不生效，需要谨慎使用。

最后，下面是一些示例代码，供大家参考：

const obj = {
  prop: {
    subprop: ['value']
  }
};

// Optional Chaining 示例
if (obj?.prop?.subprop?.[0]) {
  console.log(obj.prop.subprop[0]); // 输出：'value'
}

const value = obj?.prop?.subprop?.[1] ?? 'default';
console.log(value); // 输出：'default'

// Nullish Coalescing 示例
const foo = undefined;

const x = foo ?? 'default';
console.log(x); // 输出：'default'

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