ES2020 新运算符 '??'
Oct 17, 2020 / 2 min read / 42

ES2020 新的运算符 ??

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

什么是 ??

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

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 

总结