理解 ECMAScript 2021 中的 Nullish Coalescing 运算符

理解 ECMAScript 2021 中的 Nullish Coalescing 运算符

在 ECMAScript 2021 中加入了 Nullish Coalescing 运算符，它与 || 运算符类似，但它只会在左侧表达式的值为 null 或 undefined 时才会返回右侧表达式的值，而不是像 || 运算符那样只要左侧表达式的值为 falsy 就返回右侧表达式的值。

这个运算符的引入解决了 || 运算符的一些问题，在某些情况下更加有用。在本文中，我们将了解 Nullish Coalescing 的语法和用法，并通过一些实际的示例来深入理解。

语法

Nullish Coalescing 运算符是 ??，它将两个表达式连接起来，如果第一个表达式的值为 null 或 undefined，则返回第二个表达式的值。

示例代码：

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

const y = 0 ?? 42;
console.log(y); // 0

const z = undefined ?? 'undefined';
console.log(z); // 'undefined'

在上面的代码中，我们可以看到当 x 和 z 的值为 null 或 undefined 时，它们会返回它们后面的默认值，而 y 的值为 0，它的默认值不会被返回。

Nullish Coalescing 与 || 运算符的区别

我们已经提到了，|| 运算符在左侧表达式的值为 falsy 时返回右侧表达式的值。这包括很多值，如空字符串、数字 0 和布尔值 false。这并不总是我们期望的结果。

示例代码：

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

const y = 0 || 42;
console.log(y); // 42

const z = false || 'undefined';
console.log(z); // 'undefined'

在上面的代码中，我们可以看到当 x 和 z 的值为 falsy 时，它们会返回它们后面的默认值，而 y 的值为 0，它的默认值并不会被返回。

对于 Nullish Coalescing 运算符来说，这种问题并不会出现。它只会在左侧表达式的值为 null 或 undefined 时返回右侧表达式的值。

示例代码：

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

const y = 0 ?? 42;
console.log(y); // 0

const z = false ?? 'undefined';
console.log(z); // false

在上面的代码中，我们可以看到即使 x、y、z 的值为 falsy，它们的值也不会被忽略，而是返回原来的值。

使用场景

Nullish Coalescing 运算符在开发中有很多使用场景，以下是一些常见的用法。

设置默认值

在 JavaScript 中，我们经常需要设置默认值。使用 Nullish Coalescing 运算符我们可以很方便地实现设置默认值的功能。

示例代码：

const message = userMessage ?? 'No message';
console.log(message);

如果 userMessage 的值为 null 或 undefined，那么 message 就会被设置为 'No message'。

阻止函数调用

有时候我们需要在某些条件下阻止函数的调用，如下面的代码。

示例代码：

-- -------------------- ---- -------
-------- -------------- -- -- -
  -- -- --- ---------- -
    -------
  -
  -- -- --- ----- -
    -------
  -
  -- -- --- --- -
    -------
  -
  -- ----
-

使用 Nullish Coalescing 运算符，我们可以简化代码，达到同样的效果。

示例代码：

function doSomething(a, b, c) {
  a ??= '';
  b ??= '';
  c ??= '';
  // 函数逻辑
}

如果 a、b、c 的值为 null 或 undefined，它们会被设置为空字符串，这样我们就可以在后面的逻辑中直接使用它们而不用担心相关的错误。

总结

在 ECMAScript 2021 中引入了 Nullish Coalescing 运算符，它是一个很有用的运算符，可以解决 || 运算符在某些情况下的问题。它的语法和用法非常简单，常常被用来设置默认值或阻止函数调用。使用 Nullish Coalescing 运算符可以使代码更加简洁，可读性更好。

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