??

ES2020中的空值合并运算符 ?? 提供了一种简短的语法，在本文中，我们将值既不是 null 也不是 undefined 的表达式称为“已定义的（defined）”。

空值合并运算符（nullish coalescing operator）的写法为两个问号 ??。

a ?? b 的结果是：

如果 a 是已定义的，则结果为 a，
如果 a 不是已定义的，则结果为 b。

上面表达的意思就是，如果第一个参数不是 null/undefined，则 ?? 返回第一个参数。否则，返回第二个参数。

下面这里有个表达式

res = (a !== null && a !== undefined) ? a : b;

将它换成空值运算符后

`res = a ?? b`

通常 ?? 的使用场景是，为可能是未定义的变量提供一个默认值。

例如，在这里，如果 name 是未定义的，我们则显示 ming：

let name;

alert(name ?? "ming"); // ming

当然，如果 name 的值为除 null/undefined 外的任意值，那么我们看到的将是它：

let name = "hua";

alert(name ?? "ming"); // hua

我们还可以使用 ?? 序列从一系列的值中选择出第一个非 null/undefined 的值。

假设我们在变量 firstName、lastName 或 nickName 中存储着一个用户的数据。如果用户决定不输入值，则所有这些变量的值都可能是未定义的。

我们想使用这些变量之一显示用户名，如果这些变量的值都是未定义的，则显示 "Anonymous"。

让我们使用 ?? 运算符来实现这一需求：

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// 显示第一个已定义的值
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder

与 || 比较

或运算符 || 可以与 ?? 运算符以同样的方式使用重要的区别是：

|| 返回第一个真值。
?? 返回第一个 已定义的 值。

当我们想将 null/undefined 与 0 区别对待时，这个区别至关重要。

例如，考虑下面这种情况：

height = height ?? 100;
复制代码

如果 height 未定义，则将其赋值为 100。

让我们将其与 || 进行比较：

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

在这个例子中，height || 100 将值为 0 的 height 视为未设置的（unset），与 null、undefined 以及任何其他假（falsy）值同等对待。因此得到的结果是 100。

height ?? 100 仅当 height 确实是 null 或 undefined 时才返回 100。因此，alert 按原样显示了 height 值 0。

哪种行为更好取决于特定的使用场景。当高度 0 为有效值时，?? 运算符更适合。

优先级

?? 运算符的优先级相当低：在 MDN table 中为 5。因此，?? 在 = 和 ? 之前计算，但在大多数其他运算符（例如，+ 和 *）之后计算。

因此，如果我们需要在还有其他运算符的表达式中使用 ?? 进行取值，需要考虑加括号：

let height = null;
let width = null;

// 重要：使用括号
let area = (height ?? 100) * (width ?? 50);

alert(area); // 5000

否则，如果我们省略了括号，则由于 * 的优先级比 ?? 高，它会先执行，进而导致错误的结果。

// 没有括号
let area = height ?? 100 * width ?? 50;

// ……与下面这行代码的计算方式相同（应该不是我们所期望的）：
let area = height ?? (100 * width) ?? 50;

`??` 与 `&&` 或 `||` 一起使用

出于安全原因，JavaScript 禁止将 ?? 运算符与 && 和 || 运算符一起使用，除非使用括号明确指定了优先级。

下面的代码会触发一个语法错误：

let x = 1 && 2 ?? 3; // Syntax error

这个限制无疑是值得商榷的，但它被添加到语言规范中是为了避免人们从 || 切换到 ?? 时的编程错误。

可以明确地使用括号来解决这个问题：

let x = (1 && 2) ?? 3; // 正常工作了

alert(x); // 2

总结

空值合并运算符 ?? 提供了一种从列表中选择第一个“已定义的”值的简便方式。

它被用于为变量分配默认值：
```
// 当 height 的值为 null 或 undefined 时，将 height 的值设置为 100
height = height ?? 100;
复制代码
```
?? 运算符的优先级非常低，仅略高于 ? 和 =，因此在表达式中使用它时请考虑添加括号。
如果没有明确添加括号，不能将其与 || 或 && 一起使用。

ES2020 系列：空值合并运算符 '??'

??

与 || 比较

优先级

?? 与 && 或 || 一起使用

总结

`??` 与 `&&` 或 `||` 一起使用