Nullish Coalescing 运算符是 ES11 新增的一个运算符，它的作用是帮助开发者更方便的判断一个变量或表达式是否为 null 或 undefined。本文将介绍 Nullish Coalescing 运算符的使用技巧以及注意点，并附带示例代码，希望能够为前端开发者提供帮助。
什么是 Nullish Coalescing 运算符
Nullish Coalescing 运算符又称为空值合并运算符，它用来判断一个变量或表达式是否是 null 或 undefined，并在判断结果为 falsy 时返回一个默认值。它的语法如下：
result = value1 ?? value2;
其中，如果 value1 的值不是 null 或 undefined，则返回 value1 的值；如果 value1 的值是 null 或 undefined，则返回 value2 的值。需要注意的是，如果 value1 的值是空字符串、0 或 false，也会被认为是 truthy，不会使用 ?? 运算符返回默认值。
使用技巧
使用 Nullish Coalescing 运算符时，需要注意以下几点：
1. 结合可选链运算符使用
Nullish Coalescing 运算符非常适用于结合可选链运算符使用，可以更方便的获取对象属性的值，避免因为属性不存在而导致代码崩溃。例如：
const obj = { prop1: null };
const value = obj.prop1?.prop2 ?? 'default';
console.log(value); // 输出 "default"在上面的代码中，如果 prop1 的值是 null，则 value 的值为 'default'，否则为 obj.prop1.prop2 的值。
2. 更简洁的条件语句
使用 Nullish Coalescing 运算符可以更简洁的书写条件语句，例如：
const value = foo() ?? bar() ?? baz();
在上面的代码中，如果 foo() 的返回值为 truthy，则 value 的值为 foo() 的返回值；如果 foo() 的返回值为 falsy 且 bar() 的返回值为 truthy，则 value 的值为 bar() 的返回值；如果 foo() 和 bar() 的返回值都为 falsy，则 value 的值为 baz() 的返回值。
3. 提高代码可读性
使用 Nullish Coalescing 运算符可以提高代码的可读性，使代码更易于理解和维护。例如：
const value = foo() || 'default';
在上面的代码中，如果 foo() 的返回值是空字符串或 0，则 value 的值为 'default'，这可能会产生误解。而使用 Nullish Coalescing 运算符：
const value = foo() ?? 'default';
则可以明确的表示只有在 foo() 的返回值为 null 或 undefined 时，value 才应该赋值为 'default'。
注意点
使用 Nullish Coalescing 运算符时，需要注意以下几点：
1. 不要与 || 运算符混淆
Nullish Coalescing 运算符和 || 运算符非常相似，但是它们的判断条件不同。如果混淆使用，则可能会产生意想不到的结果。例如：
const value = false || 'default'; // value 的值为 'default' const value2 = false ?? 'default'; // value2 的值为 false
在上面的代码中，value 的值为 'default'，这是因为 || 运算符判断 false 为 falsy。而使用 Nullish Coalescing 运算符，则不会产生这种误解。
2. 不要滥用
Nullish Coalescing 运算符是方便但不是万能的，滥用会导致代码难以理解和维护。需要根据具体情况选择最合适的方法，并遵循代码简洁易读的原则。
示例代码
以下是一些使用 Nullish Coalescing 运算符的示例代码：
-- -------------------- ---- ------- -- ---------- ----- --- - - ------ ---- -- ----- ----- - ---------------- -- ---------- ------------------- -- -- --------- -- -------- ----- ------ - ----- -- ----- -- ------ -- ------- ----- ------ - ----- -- ----------
总结
Nullish Coalescing 运算符是 ES11 新增的一个运算符，可以方便的判断一个变量或表达式是否为 null 或 undefined，并在判断结果为 falsy 时返回一个默认值。使用 Nullish Coalescing 运算符时需要注意结合可选链运算符使用、更简洁的条件语句以及提高代码可读性等方面。需要注意的是，不要与 || 运算符混淆，并遵循代码简洁易读的原则。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659428b4eb4cecbf2d8b1332