ECMAScript 2020 中的 nullish coalescing operator 和 || 操作符的区别

ECMAScript 2020 中引入了 nullish coalescing operator，它和 JavaScript 中常见的 || 操作符有些相似之处，但也有很明显的区别。在本文中，我们将一起探讨它们的不同之处，并且了解在实际开发中如何选择使用。

|| 操作符

在 JavaScript 中，|| 操作符可以用于逻辑或操作，它会返回第一个为 true 的操作数，如果都为 false，则返回最后一个操作数。举个例子：

const a = 0;
const b = '';
const c = undefined;

console.log(a || b); // ''
console.log(a || b || c); // undefined
console.log(b || a); // 0
console.log(c || b || a); // 0

在上述代码中，第一个表达式 a || b 返回了空字符串，因为 0 被认为是 false。第二个表达式 a || b || c 返回了 undefined，因为变量 a 和 b 都被认为是 false。第三个表达式 b || a 返回了 0，因为变量 b 是空字符串，但它仍被认为是 true。最后一个表达式 c || b || a 也返回了 0，因为 c 和 b 都是 false，而 a 是最后一个操作数。

nullish coalescing operator

与 || 操作符不同，nullish coalescing operator 只有在其左侧操作数为 null 或 undefined 时才返回其右侧操作数。如果左侧操作数为其他 falsy 值（比如空字符串、0、NaN 等），它将返回左侧操作数。举个例子：

const a = 0;
const b = '';
const c = undefined;

console.log(a ?? b); // 0
console.log(a ?? b ?? c); // 0
console.log(b ?? a); // ''
console.log(c ?? b ?? a); // 0

在上述代码中，第一个表达式 a ?? b 返回了 0，因为左侧操作数是 0，它被认为是一个有值的变量。第二个表达式 a ?? b ?? c 也返回了 0，因为左侧操作数是 0，它被认为是一个有值的变量。第三个表达式 b ?? a 返回了空字符串，因为左侧操作数是一个空字符串，它被认为是一个有值的变量。最后一个表达式 c ?? b ?? a 返回了 0，因为 c 是 null 或 undefined。

如何选择使用

在实际开发中，应该选择使用哪一个操作符呢？

如果我们要判断的是一个变量是否有值，应该使用 nullish coalescing operator。例如，当我们从一个返回 null 或 undefined 的函数中获取值时，我们需要使用这个操作符，因为其他 falsy 值都被视为合法值。

如果我们要判断的是一个变量是否为真值或假值，或者需要使用条件赋值操作，就应该使用 || 操作符。

总结

在本文中，我们介绍了 ECMAScript 2020 中引入的 nullish coalescing operator 和 JavaScript 中常见的 || 操作符的不同之处。我们还讨论了在实际开发中应该如何选择使用。在编写 JavaScript 代码时，正确使用这两个操作符可以提高代码的可读性和健壮性，因此我们应该尽可能了解它们的用途和工作原理。

希望这篇文章能对你更好地理解并掌握这两个操作符有所帮助！

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