JavaScript 技能升级手册：如何使用 ES2020 中的 nullish coalescing operator

随着 JavaScript 的发展，新的语法和特性不断涌现。其中，ES2020 中的 nullish coalescing operator（空值合并运算符）是一个非常实用的特性。本文将详细介绍该特性的使用方法，以及在实际开发中的应用。

什么是 nullish coalescing operator

在 JavaScript 中，我们经常需要判断一个变量是否为 null 或 undefined，如果是的话，我们需要给它一个默认值。传统的做法是使用 || 运算符：

const foo = null || 'bar';
console.log(foo); // 输出 'bar'

这种方法看起来很简单，但存在一些问题。例如，如果变量的值为 0，'' 或 false，它们也会被判断为 false，从而返回默认值。为了解决这个问题，ES2020 引入了 nullish coalescing operator。

nullish coalescing operator 使用 ?? 运算符。它会判断一个变量的值是否为 null 或 undefined，如果是的话，返回默认值。否则，返回变量的值。

const foo = null ?? 'bar';
console.log(foo); // 输出 'bar'

如何使用 nullish coalescing operator

使用 nullish coalescing operator 很简单，只需要在需要判断的变量后面加上 ?? 运算符，然后跟上默认值即可。

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

在实际开发中的应用

在实际开发中，nullish coalescing operator 可以帮助我们简化代码，提高代码的可读性和可维护性。

例如，在处理用户输入时，我们经常需要判断输入的值是否为 null 或 undefined。如果是的话，我们需要给它一个默认值。这时，nullish coalescing operator 就可以派上用场了。

const userInput = null;
const username = userInput ?? 'Guest';
console.log(username); // 输出 'Guest'

另外，nullish coalescing operator 还可以与其他运算符一起使用，例如三元运算符。

const userInput = null;
const username = userInput ? userInput : 'Guest';
console.log(username); // 输出 'Guest'

// 使用 nullish coalescing operator
const username2 = userInput ?? 'Guest';
console.log(username2); // 输出 'Guest'

示例代码

下面是一个使用 nullish coalescing operator 的示例代码：

function greetUser(user) {
  const name = user.name ?? 'Guest';
  const age = user.age ?? 'unknown';
  console.log(`Hello, ${name}. You are ${age} years old.`);
}

const user1 = { name: 'Alice', age: 18 };
const user2 = { name: 'Bob' };
const user3 = {};

greetUser(user1); // 输出 'Hello, Alice. You are 18 years old.'
greetUser(user2); // 输出 'Hello, Bob. You are unknown years old.'
greetUser(user3); // 输出 'Hello, Guest. You are unknown years old.'

总结

nullish coalescing operator 是一个非常实用的特性，它可以帮助我们简化代码，提高代码的可读性和可维护性。在实际开发中，我们经常需要判断一个变量是否为 null 或 undefined，如果是的话，给它一个默认值。这时，nullish coalescing operator 就可以派上用场了。希望本文能够帮助大家更好地掌握这个特性。

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