ECMAScript 2020 的 nullish coalescing 运算符和短路求值的区别及使用场景

引言

在前端开发中，条件语句是我们经常使用的语句之一。而在条件语句中，我们经常需要用到短路求值的方式来进行一些条件的判断。在 ECMAScript 2020 规范中，添加了一个新的运算符 nullish coalescing（空位合并运算符），该运算符也可以进行条件判断。在本文中，我们将讨论 nullish coalescing 运算符和短路求值的区别，以及如何选择合适的方式来进行条件判断。

短路求值

在 JavaScript 中，我们可以使用逻辑运算符 && 和 || 进行条件判断，如下所示：

-- -------------------- ---- -------
----- - - --
----- - - --

-- -- -- -- -
  -------------- - - ------
-

-- -- -- -- -
  -------------- - - ---------
-

在上述代码中，如果 a 和 b 都为真，则第一个 if 语句的条件为真；如果 a 或 b 至少一个为真，则第二个 if 语句的条件为真。在逻辑运算符中，如果第一个条件已经能够确定整个表达式的值，那么 JavaScript 将不再计算其它条件，这种现象被称为短路求值。

const a = 1;
const b = null;

console.log(a && b); // null
console.log(b && a); // null
console.log(a || b); // 1
console.log(b || a); // 1

在上述代码中，|| 运算符会首先判断 a 是否为真，如果为真，则整个表达式的值为 a，不再计算后续的条件；如果 a 不为真，则计算 b，如果 b 为真，则表达式的值为 b，否则表达式的值为 false。而 && 运算符则相反，如果 a 不为真，则整个表达式的值为 a，不再计算后续的条件；如果 a 为真，则判断 b 是否为真，如果 b 为真，则表达式的值为 b，否则表达式的值为 false。

nullish coalescing 运算符

在 ECMAScript 2020 中，添加了一个新的运算符 ??，用于进行空位合并运算。我们先来看一个简单的例子：

const a = null;
const b = 2;
const c = a ?? b;

console.log(c); // 2

在上述代码中，由于 a 的值为 null，所以 c 的值为 b 的值 2。当变量 a 的值不为 null 或 undefined 时，运算符 ?? 的表现和 || 运算符是一样的。但当 a 的值为 null 或 undefined 时，运算符 ?? 将会返回 b 的值，而不是 a 的值。这种现象被称为 null 或 undefined 的合并运算。

const a = '';
const b = 2;
const c = a || b;
const d = a ?? b;

console.log(c); // 2
console.log(d); // ''

在上述代码中，a 的值为''，空字符串在逻辑运算中被视为false，因此如果使用 || 运算符，则表达式的值为 b 的值 2；如果使用 ?? 运算符，则表达式的值为 a 的值''，因为该值不为 null 或 undefined。

区别和使用场景

总结一下，在基本的表现上，nullish coalescing 运算符与短路求值的 || 运算符有相似之处，但 nullish coalescing 运算符与 || 运算符在对待假值时所体现的效果是有区别的：

• || 运算符会在 a 的值为 falsy（即 false、0、''、null、undefined）时，将值 b 赋给变量 c；
• ?? 运算符只有在 a 的值为 null 或 undefined 时，将值 b 赋给变量 c。

综上所述，我们应该在什么情况下使用这两种方式来进行条件判断呢？简而言之：

• 当我们希望使用一个默认值时，并且当变量的值为 false、0 或空字符串时，也希望将其视为合法值，我们应该使用 || 运算符来进行条件判断；
• 当我们希望使用一个默认值时，但是当变量的值为 null 或 undefined 时，希望使用默认值替代时，我们应该使用 ?? 运算符来进行条件判断。

示例代码

下面是一个使用 nullish coalescing 运算符的示例代码：

const firstName = '';
const lastName = '';
const nickName = 'Superman';

const displayName = firstName ?? lastName ?? nickName ?? 'Anonymous';

console.log(displayName); // 'Superman'

在上述代码中，如果 firstName 和 lastName 的值都为空字符串，则 displayName 的值为'Anonymous'。如果其中一个变量的值不为空，则 displayName 的值为其值。

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