ES10 中的 nullish 合并运算符及其使用

在 JavaScript 中，我们经常需要处理变量的值为空的情况。在 ES10 中，引入了 nullish 合并运算符，可以方便地处理这种情况。

什么是 nullish 合并运算符

nullish 合并运算符是 ??，它用于判断一个表达式的值是否为 null 或 undefined，如果是，则返回一个默认值。

举个例子：

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

在上面的代码中，变量 foo 的值为 null，所以使用了 nullish 合并运算符返回了默认值 'default'。

nullish 合并运算符与 || 运算符的区别

在 JavaScript 中，我们通常使用 || 运算符来判断变量的值是否为空，如果为空则返回一个默认值。但是，|| 运算符有一个缺陷，它会将一些 falsy 值（例如 0、空字符串、false 等）也当作为空值处理，这可能导致一些意想不到的错误。

nullish 合并运算符则不会将 falsy 值当作为空值处理，只有 null 和 undefined 才会被判断为空值。

举个例子：

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

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

在上面的代码中，变量 foo 使用了 || 运算符返回了默认值 'default'，而变量 bar 使用了 nullish 合并运算符返回了原始值 0。

如何使用 nullish 合并运算符

使用 nullish 合并运算符很简单，只需要在需要判断的表达式后面加上 ??，并在后面跟上默认值即可。

举个例子：

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

console.log(foo); // 'default'
console.log(bar); // 'default'
console.log(baz); // 'hello'

在上面的代码中，变量 foo 和 bar 都使用了 nullish 合并运算符返回了默认值 'default'，而变量 baz 的值不为 null 或 undefined，所以返回了原始值 'hello'。

总结

nullish 合并运算符是 ES10 中新增的语法，它可以方便地处理变量的值为空的情况。与 || 运算符相比，nullish 合并运算符更加安全可靠，因为它只会将 null 和 undefined 当作为空值处理。在实际开发中，我们可以使用 nullish 合并运算符来编写更加健壮的代码。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65625997d2f5e1655dc3d7fb