随着 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 的示例代码：
-- -------------------- ---- ------- -------- --------------- - ----- ---- - --------- -- -------- ----- --- - -------- -- ---------- ------------------- -------- --- --- ------ ----- ------- - ----- ----- - - ----- -------- ---- -- -- ----- ----- - - ----- ----- -- ----- ----- - --- ----------------- -- -- ------- ------ --- --- -- ----- ----- ----------------- -- -- ------- ---- --- --- ------- ----- ----- ----------------- -- -- ------- ------ --- --- ------- ----- -----
总结
nullish coalescing operator 是一个非常实用的特性，它可以帮助我们简化代码，提高代码的可读性和可维护性。在实际开发中，我们经常需要判断一个变量是否为 null 或 undefined，如果是的话，给它一个默认值。这时，nullish coalescing operator 就可以派上用场了。希望本文能够帮助大家更好地掌握这个特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65895064eb4cecbf2de97cae