在 JavaScript 中，我们经常需要检查变量是否为 null 或 undefined，并根据这个结果来采取相应的措施。在以前，这通常需要使用条件运算符或 && 运算符来实现。但是，ES11 新增的 Nullish Coalescing Operator 可以更方便地处理这类场景。本文将介绍 Nullish Coalescing Operator 的使用方法以及适用场景，并提供一些示例代码。
什么是 Nullish Coalescing Operator
Nullish Coalescing Operator，中文翻译为“空值合并运算符”。它由两个问号（??）组成，用于判断一个变量是否为 null 或 undefined，并给出一个默认值，如果变量不为 null 或 undefined，则返回该变量；否则返回默认值。
Nullish Coalescing Operator 的语法如下：
// 如果变量为 null 或 undefined，则返回默认值，否则返回变量的值 variable ?? defaultValue;
Nullish Coalescing Operator 的使用方法
下面看一些实际的例子，来说明 Nullish Coalescing Operator 的使用方法。
例子1：使用默认值
我们可以使用 Nullish Coalescing Operator 来为变量提供默认值。例如：
const myVar = undefined; const myDefault = 'default value'; // 如果 myVar 为 null 或 undefined，则返回 myDefault const result = myVar ?? myDefault; console.log(result); // 'default value'
例子2：防止抛出错误
我们经常需要检查一个对象是否存在某个属性或是否为 null 或 undefined。常见的方法是使用 && 运算符，例如：
const myObject = {
propertyA: 'value A',
};
// 如果 myObject 不存在或没有 propertyB，会发生错误
const result = myObject.propertyB && myObject.propertyB.someMethod();使用 Nullish Coalescing Operator 可以更方便地避免这种错误，例如：
const myObject = {
propertyA: 'value A',
};
// 如果 myObject 不存在或没有 propertyB，不会发生错误
const result = myObject.propertyB ?? 'defaultValue';例子3：和 || 运算符的区别
Nullish Coalescing Operator 和 || 运算符有些相似，但是它们有重要的区别。对于 false、0、'' 和其他类似的 falsy 值，|| 运算符会返回默认值，但 Nullish Coalescing Operator 不会。例如：
-- -------------------- ---- ------- ----- ----- - ------ ----- --------- - -------- ------- -- -- -- ---------- -------- ------ ----- ------- - ----- -- ---------- -- -- -- ---------------- ----- ----- ------- - ----- -- ---------- --------------------- -- -------- ------ --------------------- -- -----
Nullish Coalescing Operator 的适用场景
Nullish Coalescing Operator 主要用于处理以下场景：
- 为变量提供默认值
- 防止抛出错误
- 处理具有特定含义的值（例如 0 或 ''）
在实践中，我们可能需要根据具体的情况来确定是否使用 Nullish Coalescing Operator，不要将其作为默认的解决方案。
结论
Nullish Coalescing Operator 是一个方便的 ES11 新特性，它可以更方便地处理 null 或 undefined 值，避免抛出错误，给出默认值。虽然它并不适用于所有场景，但在某些特定的情况下，它可能是一种更好的选择。在实践过程中，我们需要根据具体情况来确定是否使用 Nullish Coalescing Operator。
示例代码
以下是本篇文章中提到的示例代码。
-- -------------------- ---- ------- -- ----- ----- ----- - ---------- ----- --------- - -------- ------- ----- ------ - ----- -- ---------- -------------------- -- -------- ------ -- ------ ----- -------- - - ---------- ------ --- -- ----- ------ - ------------------ -- --------------- -------------------- -- -------------- -- - -- ------ ----- ----- - ------ ----- --------- - -------- ------- ----- ------- - ----- -- ---------- ----- ------- - ----- -- ---------- --------------------- -- -------- ------ --------------------- -- -----
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674bb55bd657e1f70dba457c