如何使用 ECMAScript 2020 中的 Nullish 合并运算符处理逻辑问题-JavaScript中文网-JavaScript教程资源分享门户

前言

在 JavaScript 中，我们经常会遇到一些逻辑问题，例如当某个变量的值为空时，我们需要给它一个默认值。在过去，我们通常使用 || 运算符来处理这种情况，但它存在一些问题。例如，当变量的值为 false、0 或者空字符串时，|| 运算符会将其视为 falsy 值，从而返回默认值，这不是我们所期望的结果。为了解决这个问题，ECMAScript 2020 引入了 Nullish 合并运算符，它可以更好地处理这类逻辑问题。

Nullish 合并运算符是什么？

Nullish 合并运算符（??）是 ECMAScript 2020 新增的运算符，它用于判断一个变量的值是否为 null 或 undefined，如果是，则返回默认值，否则返回变量的值。Nullish 合并运算符只在变量的值为 null 或 undefined 时才返回默认值，其他 falsy 值不会触发该运算符。

如何使用 Nullish 合并运算符？

使用 Nullish 合并运算符非常简单，只需要在需要判断的变量后面加上 ??，并在后面跟上默认值即可。例如：

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

在上面的例子中，当变量 foo 的值为 null 时，Nullish 合并运算符会返回默认值 'default value'，否则会返回变量 foo 的值。

Nullish 合并运算符和 || 运算符的区别

Nullish 合并运算符和 || 运算符的行为有所不同。如前所述，|| 运算符在处理 falsy 值时可能会出现问题，而 Nullish 合并运算符则可以更好地处理这类问题。例如：

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

const baz = '';
const qux = baz ?? 'default value';
console.log(qux); // ''

在上面的例子中，当变量 foo 的值为空字符串时，|| 运算符会将其视为 falsy 值，从而返回默认值 'default value'，而 Nullish 合并运算符则会返回空字符串。这说明了 Nullish 合并运算符可以更加准确地处理逻辑问题。

总结

Nullish 合并运算符是 ECMAScript 2020 中新增的运算符，它可以更好地处理变量为空时的逻辑问题。在使用 Nullish 合并运算符时，需要注意它只在变量的值为 null 或 undefined 时才返回默认值，其他 falsy 值不会触发该运算符。与 || 运算符相比，Nullish 合并运算符可以更加准确地处理逻辑问题，因此在实际开发中应该优先使用它。

示例代码

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

const baz = '';
const qux = baz ?? 'default value';
console.log(qux); // ''

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