JavaScript 空值合并运算符

在本教程中，您将了解 JavaScript 空值合并运算符 ??，它接受两个值并在第一个值是 null 或者 undefined 时返回第二个值。

JavaScript 空值合并运算符简介

ES2020 引入了由双问号 ?? 表示的空值合并运算符。空值合并运算符是一个接受两个值的逻辑运算符：

value1 ?? value2

如果第一个值 value1 是 null 或者是 undefined，则空值合并运算符返回第二个值 value2 。从技术上讲，空值合并运算符等效于以下语句：

const result = value1;
if(result === null || result === undefined) {
   result = value2;
}

空值可以是 null 或者是 undefined。

以下示例使用空值合并运算符 ?? 返回字符串 'John'，因为第一个值为null：

const name = null ?? 'John';
console.log(name); // 'John'

此示例返回 28，因为第一个值是undefined：

const age = undefined ?? 28;
console.log(age);

为变量分配默认值时，通常使用逻辑或运算符 ||。例如：

let count;
let result = count || 1 ;
console.log(result); // 1

在此示例中，count 变量的值是 undefined，它被逻辑或运算符 || 强制为 false。因此 result 的值是 1。

但是有些时候，如果您将空字符串视为有效值，使用逻辑或运算符 || 并不会如你所愿，如下所示：

let count = 0;
let result = count || 1;

结果是 1，而不是 0，这是您可能想不到的。

空值合并运算符可帮助您避免这种陷阱。当第一个值是null 或者 undefined 时，它只返回第二个值。

跟逻辑或和与运算符类似，如果第一个操作数不是undefined 或者是 null ，空值合并运算符也不计算第二个值。

例如：

let result = 1 ?? console.log('Hi');

在此示例中，运算符 ?? 不会评估第二个表达式向控制台打印“Hi”，因为第一个值是 1，而不是 null 或者 undefined。

以下示例评估第二个表达式，因为第一个表达式是 undefined：

let result = undefined ?? console.log('Hi');

输出：

'Hi'

如果将逻辑 AND 或 OR 运算符直接与空值合并运算符组合使用，则会出现 SyntaxError，如下所示：

const result = null || undefined ?? 'OK'; // SyntaxError

但是，您可以将运算符 ?? 左侧的表达式括在括号中指定运算符优先级来避免此错误：

const result = (null || undefined) ?? 'OK'; 
console.log(result); // 'OK'