ES11 新特性：手把手教你使用 Nullish Coalescing 操作符

在 JavaScript 中，我们经常需要检查变量是否为 null 或 undefined，然后再做出相应的处理。在过去，我们通常使用 || 运算符来完成这个任务。但是，|| 运算符并不总是能够正确地处理 null 或 undefined 值。为了解决这个问题，ES11 引入了一个新的操作符：Nullish Coalescing 操作符。

什么是 Nullish Coalescing 操作符？

Nullish Coalescing 操作符（??）是一个新的二元运算符，用于检查一个变量是否为 null 或 undefined。如果变量的值为 null 或 undefined，则返回一个默认值。否则，返回变量的值。

Nullish Coalescing 操作符的语法如下：

variable ?? defaultValue

其中，variable 是要检查的变量，defaultValue 是默认值。

Nullish Coalescing 操作符和 || 运算符的区别

在了解 Nullish Coalescing 操作符之前，我们先来看一下 || 运算符的行为。|| 运算符在检查变量时，会把变量转换成布尔值。如果变量的值为 false、0、''、NaN 或 null 或 undefined，则返回第二个操作数；否则，返回第一个操作数。

下面是一个例子：

const foo = null || 'default';
console.log(foo); // 'default'

在这个例子中，变量 foo 的值为 null，所以 || 运算符返回了第二个操作数 'default'。

但是，如果我们把变量 foo 的值改成 ''，则结果会有所不同：

const foo = '' || 'default';
console.log(foo); // 'default'

在这个例子中，变量 foo 的值为 ''，虽然它是一个空字符串，但是 || 运算符把它转换成了布尔值 false，所以返回了第二个操作数 'default'。

这种行为可能会导致问题。例如，如果我们想检查一个变量是否为空字符串，但是变量的值为 null 或 undefined，那么 || 运算符会返回默认值，这可能不是我们想要的结果。

为了解决这个问题，ES11 引入了 Nullish Coalescing 操作符。Nullish Coalescing 操作符只会在变量的值为 null 或 undefined 时返回默认值，否则返回变量的值。

下面是一个使用 Nullish Coalescing 操作符的例子：

const foo = null ?? 'default';
console.log(foo); // 'default'

在这个例子中，变量 foo 的值为 null，所以 Nullish Coalescing 操作符返回了默认值 'default'。

如果我们把变量 foo 的值改成 ''，则结果会有所不同：

const foo = '' ?? 'default';
console.log(foo); // ''

在这个例子中，变量 foo 的值为 ''，它不是 null 或 undefined，所以 Nullish Coalescing 操作符返回了变量的值 ''。

如何使用 Nullish Coalescing 操作符

使用 Nullish Coalescing 操作符非常简单。我们只需要把要检查的变量放在 ?? 的左边，把默认值放在 ?? 的右边即可。

下面是一个例子：

const foo = null;
const bar = foo ?? 'default';

console.log(bar); // 'default'

在这个例子中，变量 foo 的值为 null，所以我们使用 Nullish Coalescing 操作符来检查变量的值。由于变量的值为 null，所以返回默认值 'default'。

Nullish Coalescing 操作符的嵌套使用

我们可以在一个表达式中嵌套使用多个 Nullish Coalescing 操作符。这可以帮助我们检查多个变量是否为 null 或 undefined。

下面是一个例子：

const foo = null;
const bar = undefined;
const baz = '';
const qux = foo ?? bar ?? baz ?? 'default';

console.log(qux); // ''

在这个例子中，我们使用了多个 Nullish Coalescing 操作符来检查变量的值。由于变量 foo 和 bar 的值都为 null 或 undefined，所以返回默认值 ''。

总结

Nullish Coalescing 操作符是 ES11 中的一个新特性，用于检查变量是否为 null 或 undefined。它的行为与 || 运算符不同，只有在变量的值为 null 或 undefined 时才会返回默认值。Nullish Coalescing 操作符可以帮助我们编写更加健壮的代码，避免因变量的类型转换而导致的错误。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/65c61925add4f0e0ff08d572