??、??= in JavaScript

前言

今天偶然看到一段 JavaScript 代码中使用了 ?? 运算符，当时就有点纳闷了：JavaScript 中还有这玩意？

还记得在学习 Dart 语法时也有 ?? 逻辑运算符，没管那么多，直接上 tc39 寻找了一番。

终于在 ECMAScript® 2022 Language Specification` 一文中找到了：

[CoalesceExpression][In, Yield, Await] :
[CoalesceExpressionHead][?In, ?Yield, ?Await] ?? [BitwiseORExpression][?In, ?Yield, ?Await]
复制代码

好家伙，居然是 2022 年的标准，难怪我不知道。。。

那接下来就介绍一下它的妙用吧！

?? 是什么

?? 运算符英文全称 Nullish coalescing operator，中文翻译为 空值合并运算符。

它是一个逻辑操作符，当其左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

等等！看起来怎么和 || 如此相似？

没错，但是需要注意的是：它与逻辑或操作符 || 不同，|| 操作符会在左侧操作数为假值时返回右侧操作数，否则返回左侧操作数。

举个例子

对于 || 或操作符来说，下面两种情况都将返回右侧操作数：

const num1 = 0 || 10; // 10
const num2 = undefined || 10; // 10
复制代码

但是对于 ?? 空值合并运算符来说情况则有所不同：

const num1 = 0 ?? 10; // 0
const num2 = undefined ?? 10; // 10
复制代码

这在很多情况下是非常有用的，倘若用户输入数字 0，如果使用 || 操作符而事前不施加判断的话，用户的输入就会被默认值 10 代替。

短路

在浏览器控制台中输入以下代码测试 ?? 操作符是否于 || 同样都是短路运算符：

可以很容易看出，当左侧表达式不为 null 或者 undefined 时，右侧表达式不会被执行，所以它也是短路运算符。

??=

当你觉得这就结束的时候，ES2022 为我们配套带来了 ??= 赋值操作符号，同样它于 ||= 运算符相似，同上赋值条件存在差异。

??= 运算符英文全称Logical nullish assignment，中文翻译为逻辑空赋值。

逻辑空赋值运算符 (x ??= y) 仅在 x 是 null 或 undefined 时对其赋值。

举个例子

let a = 0;
a ??= 1;
console.log(a); // 0

let b = null;
b ??= 1;
console.log(b); // 1
复制代码

语法短路求值

根据 ?? 运算符的短路特性，聪明的你可以已经想到 x ??= y 其实等价于以下表达式：

x ?? (x = y);
复制代码

而不等价于如下表达式，因为其一定发生赋值操作。

x = x ?? y;
复制代码