ES2020 新的运算符 ??

ES2020 新的特性新增了一个运算符 ?? (空值合并运算符)

什么是 ??

空值合并运算符并不是什么全新的东西。它只是一种获得两者中的第一个不是 null/undefined值的语法。

a ?? b 的结果是：

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

等于说，如果第一个参数a不是 null/undefined，则 ?? 返回第一个参数a。否则，返回第二个参数b。

翻译一下 就是

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

与|| 比较

咋一看 有点跟 || 像,空值合并运算符 ?? 是最近才被添加到 JavaScript 中的，它的出现是因为人们对 || 的使用不太满意。

例如如下代码

const a = 0,b=1;
const result1 =  a ||b  // 1 
const result2 =  a ||b  // 0

它们之间重要的区别是：

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

在上面代码中a b 是已经定义的值,不存在未定义! || 的语法类似找到第一个值的 Boolean(a) 是 true 的运算付.

?? 运算符的优先级

?? 运算符的优先级相当低：在 MDN 文档中 中为 5。因此，?? 在 = 和 ? 之前计算，但在大多数其他运算符之后计算。

let a = null;
let b = null;

// 重要：使用括号
let c = (a ?? 100) * (b ?? 50);
alert(c); // 5000

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

// 没有括号
let c = a ?? 100 * b ?? 50;

// 就变成了与下面这行代码的计算方式相同
let c = a ?? (100 * b) ?? 50; // 明显不是我们想要的

已知问题

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

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

let result = 1 && 2 ?? 3; // Syntax erro

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

let result = (1 && 2) ?? 3;  // 2 

总结

• 空值合并运算符 ?? 提供了一种从列表中选择第一个已定义的值。
• ?? 运算符的优先级非常低，在表达式中使用它时请添加括号。
• 如果没有明确添加括号,不能将其与 || 或 && 一起使用。