JavaScript开发人员都有这样的经历——在使用变量之前，必须检查它是否为null或undefined。这导致了很多重复的条件检查，可能会使我们的代码混乱不堪。

随着在ECMAScript 2020中引入了nullish coalescing操作符，我们现在有了一种更清晰的处理null或undefined值的方式。

在这篇文章中，我将解释nullish coalescing操作符是什么，演示如何使用它，并讨论为什么它是JavaScript语言中如此重要的一部分。

什么是Nullish Coalescing操作符？

Nullish Coalescing操作符（??）是在ECMAScript 2020中引入的逻辑运算符，用于处理null或undefined的默认值。

它返回第一个操作数，如果它不是null或undefined。否则，它返回第二个操作数。

基本语法如下：

代码语言：javascript复制let name = value ?? 'Default';如果value是null或undefined，它将返回'Default'。如果value有任何其他值，比如''、0、false等，它将返回该值而不做改变。

这使我们能够更简洁地分配默认值，而不需要多个条件检查。

使用Nullish Coalescing操作符

以下是如何使用nullish coalescing操作符的一些常见示例：

示例1：基本用法

代码语言：javascript复制let undefinedValue;

let defaultValue = 'default';

let result = undefinedValue ?? defaultValue;

console.log(result); // 输出：'default'在这个例子中，undefinedValue是undefined，因此Nullish Coalescing操作符返回defaultValue。

示例2：带有null值

代码语言：javascript复制let nullValue = null;

let defaultValue = 'default';

let result = nullValue ?? defaultValue;

console.log(result); // 输出：'default'在这种情况下，nullValue是null，因此操作符再次返回defaultValue。

示例3：带有非nullish值

代码语言：javascript复制let nonNullishValue = 'I am defined';

let defaultValue = 'default';

let result = nonNullishValue ?? defaultValue;

console.log(result); // 输出：'I am defined'在这种情况下，nonNullishValue既不是null也不是undefined，因此操作符返回nonNullishValue。

示例4：带有零和空字符串

代码语言：javascript复制let zeroValue = 0;

let defaultValue = 'default';

let result = zeroValue ?? defaultValue;

console.log(result); // 输出：0

let emptyStringValue = '';

result = emptyStringValue ?? defaultValue;

console.log(result); // 输出：''在这些情况下，该操作符分别返回0和''，因为它只检查null或undefined，而不是其他“falsy”值，比如0或''。

示例5：对象属性赋值

代码语言：javascript复制let user = {

firstName: null,

lastName: 'Doe'

};

let firstName = user.firstName ?? 'John';

let lastName = user.lastName ?? 'Doe';

console.log(firstName); // 输出：'John'

console.log(lastName); // 输出：'Doe'在这种情况下，firstName属性为null，因此Nullish Coalescing操作符将其替换为'John'。lastName属性既不是null也不是undefined，因此它保持为'Doe'。

示例6：链接

Nullish Coalescing操作符可用于链接操作，检索列表中的第一个已定义值：

代码语言：javascript复制let value1 = null;

let value2 = undefined;

let value3 = 'Hello, World!';

let value4 = 'Another Value';

let result = value1 ?? value2 ?? value3 ?? value4; // 结果将是'Hello, World!'在这种情况下，value1和value2为null或undefined，因此它们被跳过。value3是第一个非nullish值，因此它被返回。

示例7：数组

代码语言：javascript复制let arr = [null, undefined, 'Hello, World!'];

let value = arr[0] ?? 'Default Value'; // value将是'Default Value'

value = arr[2] ?? 'Default Value'; // value将是'Hello, World!'在这种情况下，该操作符用于检查数组中特定索引是否为null或undefined，并在是的情况下提供默认值。

比较||和??

||（逻辑或）和??（Nullish Coalescing操作符）都用于为变量提供默认值。但是，它们的运作方式存在细微的差异，可能导致不同的结果。

逻辑或||

逻辑或||运算符返回第一个操作数，如果它是真值。否则，返回第二个操作数。然而，JavaScript认为以下值为假值：

false0''（空字符串）NaNnullundefined当使用||提供默认值时，这可能导致意外的结果。例如：

代码语言：javascript复制let count = 0;

let displayCount = count || 'Not specified';

console.log(displayCount); // 输出：'Not specified'在上面的代码中，0是count的有效值，但由于0为假值，||运算符返回第二个操作数'Not specified'。

Nullish Coalescing操作符??

Nullish Coalescing操作符??是一个逻辑运算符，如果第一个操作数不是null或undefined，它将返回第一个操作数，否则返回第二个操作数。

这使得??更适合提供默认值，因为它只在原始值为null或undefined时才回退到默认值，而不是在其他falsy值（如0、false或''）上回退。

使用之前的例子但使用??：

代码语言：javascript复制let count = 0;

let displayCount = count ?? 'Not specified';

console.log(displayCount); // 输出：0在这种情况下，0被正确显示，因为??运算符正确地识别出count不是null或undefined。

虽然||和??都可以用于提供默认值，但是??通常是一个更安

全的选择，因为它不将0、false和''（空字符串）视为回退条件。这使得??在这些falsy值是有效且预期的情况下特别有用。

为什么它对于编写干净的代码至关重要

Nullish Coalescing操作符对于编写清晰的JavaScript代码至关重要的原因有几点：

避免重复的条件语句——正如前面提到的，它消除了我们代码中多个if/else检查的需要。默认参数值——这使得在函数参数中清晰地定义默认值变得很容易。可选链——与可选链结合使用时效果很好，用于访问嵌套属性。可读性——使用??的代码相对于深奥的条件语句来说更容易理解。未来的证明——随着JavaScript的发展，类似于此类的更多功能将继续改进语言。早期采用新的语法使我们的代码更适应未来。我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！