JavaScript 空值合并运算符

摘要：在本教程中，您将学习关于 JavaScript 空值合并运算符 (??) 的知识，该运算符接受两个值，如果第一个值为 null 或 undefined，则返回第二个值。

JavaScript 空值合并运算符简介

ES2020 引入了空值合并运算符，用双问号 (??) 表示。空值合并运算符是一种逻辑运算符，它接受两个值

value1 ?? value2

如果第一个值 (value1) 为 null 或 undefined，则空值合并运算符返回第二个值 (value2)。从技术上讲，空值合并运算符等效于以下代码块

const result = value1;
if(result === null || result === undefined) {
   result = value2;
}Code language: JavaScript (javascript)

空值是指值为 null 或 undefined 的值。

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

const name = null ?? 'John';
console.log(name); // 'John'Code language: JavaScript (javascript)

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

const age = undefined ?? 28;
console.log(age);Code language: JavaScript (javascript)

在为变量指定默认值时，您通常使用逻辑或运算符 (||)。例如

let count;
let result = count || 1 ;
console.log(result); // 1Code language: JavaScript (javascript)

在此示例中，count 变量为 undefined，它会被强制转换为 false。因此，result 为 1。

但是，如果将 0 或空字符串 '' 视为有效值，逻辑 OR 运算符 (||) 有时会让人感到困惑，例如

let count = 0;
let result = count || 1;Code language: JavaScript (javascript)

结果为 1，而不是 0，这可能不是您期望的结果。

空值合并运算符可以帮助您避免此问题。它仅在第一个值为 null 或 undefined 时返回第二个值。

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

例如

let result = 1 ?? console.log('Hi');Code language: JavaScript (javascript)

在此示例中，运算符 ?? 不会计算将 “Hi” 显示到控制台的第二个表达式，因为第一个值为 1，它既不是 null 也不是 undefined。

以下示例将计算第二个表达式，因为第一个值为 undefined

let result = undefined ?? console.log('Hi');Code language: JavaScript (javascript)

输出

'Hi'Code language: JavaScript (javascript)

如果您将逻辑 AND 或 OR 运算符直接与空值合并运算符结合使用，例如

const result = null || undefined ?? 'OK'; // SyntaxErrorCode language: JavaScript (javascript)

将出现 SyntaxError。但是，您可以通过将 ?? 运算符左侧的表达式括在括号中来避免此错误，以明确指定运算符优先级

const result = (null || undefined) ?? 'OK'; 
console.log(result); // 'OK'Code language: JavaScript (javascript)

本教程是否有帮助？