关于 ECMAScript 2019 中的 nullish coalescing 运算符的使用细节

在新推出的 ECMAScript 2019 中，新引入了一种运算符 nullish coalescing（空值合并），用于处理变量为空或者undefined的情况。本文将详细介绍该运算符的使用细节，以及如何在前端开发中合理使用。

什么是 nullish coalescing 运算符

nullish coalescing 运算符用于替代传统的 || 运算符，在某些特定情况下更为准确地确定变量值。该运算符用两个？号（??）表示，其语法为：

a ?? b;

该语法中，a 和 b 都是表达式。当 a 为 null 或 undefined 时，返回 b 的值，否则返回 a 的值。

与 || 运算符的区别

在之前的 JavaScript 版本中，我们通常使用 || 做为 null 或者 undefined 的默认值。例如：

const x = value || 'default';

但是这种写法在某些情况下会存在问题，考虑下面的代码：

const x = {prop: ''} || 'default';
const y = {prop: ''} ?? 'default';

console.log(x); // {prop: ''}
console.log(y); // {prop: ''}

可以看到，当 x 使用 || 运算符时，返回了不是我们期望的 'default'，这是一种常见的坑点。而 nullish coalescing 运算符可以正确地返回期望的 'default'：

const y = {prop: ''} ?? 'default';
console.log(y); // 'default'

如何精选 nullish coalescing 运算符

在实际项目中，我们可能会遇到多个变量需要做默认值，此时需要注意使用nullish coalescing 运算符。

const x = a.length > 0 ? a : b;
const y = a || b;
const z = a ?? b;

如果 a 是一个空字符串，则 x 和 y 都会选择 b ，但是 z 会选择 a，这是因为 a 的值不是 null 或 undefined。这是一个非常微妙的区别，需要非常注意。

了解 nullish coalescing 运算符的优先级

在使用过程中需要注意的是，nullish coalescing 运算符的优先级比 || 运算符更低，是所有运算符中最低的。因此在使用时，需要特别注意。

以下代码可以帮助我们了解不同运算符的优先级：

const x = null || undefined ?? 'hello';
console.log(x); // undefined

我们期望的输出应该是 'hello'，但是实际上返回的是 undefined，这是因为 || 运算符优先级高于 nullish coalescing 运算符，因此可以这样改写代码：

const x = (null || undefined) ?? 'hello';
console.log(x); // 'hello'

总结

本文详细介绍了 ECMAScript 2019 中的 nullish coalescing 运算符的使用细节，与传统的 || 运算符的区别以及一些注意事项。在实际项目中，需要特别注意 nullish coalescing 运算符的使用，避免出现不必要的错误。

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