ES11 中 Nullish Coalescing 运算符的使用技巧及注意点-JavaScript中文网-JavaScript教程资源分享门户

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 运算符的示例代码：

// 结合可选链运算符使用
const obj = { prop1: null };
const value = obj.prop1?.prop2 ?? 'default';
console.log(value); // 输出 "default"

// 更简洁的条件语句
const value2 = foo() ?? bar() ?? baz();

// 提高代码可读性
const value3 = foo() ?? 'default';

总结

Nullish Coalescing 运算符是 ES11 新增的一个运算符，可以方便的判断一个变量或表达式是否为 null 或 undefined，并在判断结果为 falsy 时返回一个默认值。使用 Nullish Coalescing 运算符时需要注意结合可选链运算符使用、更简洁的条件语句以及提高代码可读性等方面。需要注意的是，不要与 || 运算符混淆，并遵循代码简洁易读的原则。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/659428b4eb4cecbf2d8b1332

ES11 中 Nullish Coalescing 运算符的使用技巧及注意点