如何理解 ECMAScript 2019 中的 nullish coalescing 运算符

随着 ECMAScript 2019 的发布，新的 nullish coalescing 运算符也被引入到了 JavaScript 中。在此之前，我们可能已经使用了 || 运算符来处理 null 或 undefined 值。但是，|| 运算符并不总是有效，因为它会将 falsy 值（比如 0 或空字符串）和 null 或 undefined 值一起处理。这就是 nullish coalescing 运算符的作用，它可以帮助我们更好地处理 null 或 undefined 值。

什么是 nullish coalescing 运算符？

nullish coalescing 运算符（??）是一个新的 JavaScript 运算符，它用于处理 null 或 undefined 值。当使用 ?? 运算符时，如果左侧的值为 null 或 undefined，则返回右侧的值，否则返回左侧的值。

例如：

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

const value2 = undefined ?? 'default value';
console.log(value2); // 'default value'

const value3 = 'some value' ?? 'default value';
console.log(value3); // 'some value'

在上面的示例中，我们使用 ?? 运算符来检查变量的值是否为 null 或 undefined。如果是，我们将使用默认值，否则将使用变量的值。

nullish coalescing 运算符与 || 运算符的区别

如果您之前使用过 JavaScript，您可能已经使用了 || 运算符来处理 null 或 undefined 值。但是，|| 运算符并不总是有效，因为它会将 falsy 值（比如 0 或空字符串）和 null 或 undefined 值一起处理。这就是 nullish coalescing 运算符的作用，它可以帮助我们更好地处理 null 或 undefined 值。

例如：

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

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

在上面的示例中，我们使用 || 运算符来检查变量的值是否为 null 或 falsy 值。如果是，我们将使用默认值，否则将使用变量的值。这就是为什么使用 || 运算符来处理 null 或 undefined 值并不总是有效的原因。

如何在代码中使用 nullish coalescing 运算符

下面是一个使用 nullish coalescing 运算符的示例：

const user = {
  name: 'John',
  age: 0,
  email: null
};

const name = user.name ?? 'Unknown';
const age = user.age ?? 18;
const email = user.email ?? 'unknown@email.com';

console.log(name); // 'John'
console.log(age); // 0
console.log(email); // 'unknown@email.com'

在上面的示例中，我们使用 ?? 运算符来检查 user 对象中的属性是否为 null 或 undefined。如果是，我们将使用默认值。

总结

nullish coalescing 运算符是 ECMAScript 2019 中引入的一个新的 JavaScript 运算符，它用于处理 null 或 undefined 值。与 || 运算符不同，nullish coalescing 运算符不会将 falsy 值（比如 0 或空字符串）和 null 或 undefined 值一起处理。在代码中使用 nullish coalescing 运算符可以帮助我们更好地处理 null 或 undefined 值。

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