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

JavaScript 空值合并运算符简介

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

value1 ?? value2

如果第一个值 value1null 或者是 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'

结论

  • 空值合并运算符 ?? 是一个逻辑运算符,它接受两个值并在第一个值是 null 或者 undefined 时返回第二个值。
  • 空值运算符被短路,不能直接与逻辑 AND 或 OR 运算符组合使用。