在 JavaScript 中，我们经常需要判断一个值是否为 null 或 undefined，通常使用逻辑或操作符（||）来完成。但是这种方式存在一些问题，例如 false、0 和空字符串 '' 等值也会被视为 falsy 值，导致我们产生一些不必要的 bug。ES2020 引入了 Nullish Coalescing Operator（??），来解决这个问题。本文将会详细介绍该运算符的工作原理。
Nullish Coalescing Operator 工作原理
Nullish Coalescing Operator（??）的工作原理比较简单，它是一种短路运算符，在运算时，如果左操作数的值为 null 或 undefined，就返回右操作数的值，否则返回左操作数的值。
示例代码：
const foo = null ?? 'default'; // 'default' const bar = 'hello' ?? 'default'; // 'hello' const baz = 0 ?? 'default'; // 0 const qux = undefined ?? 'default'; // 'default'
在上面的示例代码中，foo 的值为 'default'，因为左操作数为 null，而 bar 的值为 'hello'，因为左操作数为非 falsy 值，因此返回左操作数的值。baz 的值为 0，因为 0 不是 falsy 值，而 qux 的值为 'default'，因为左操作数为 undefined。
使用场景
Nullish Coalescing Operator（??）的主要作用是在获取可空变量的值时使用。假设我们有一个 API，返回 JSON 格式的用户信息，其中 username 可能存在也可能为空。在使用逻辑或操作符（||）时，如果 username 为 ''，就会返回一个默认值，导致出现不必要的 bug。
示例代码：
const user = {
name: 'Bob',
username: ''
};
const username = user.username || 'unknown';
console.log(username); // 'unknown'上面的代码中，由于 user.username 为 ''，所以会返回 'unknown'，但实际上我们想要的是返回空字符串。这时候就可以使用 ?? 运算符。
修改后的代码如下：
const user = {
name: 'Bob',
username: ''
};
const username = user.username ?? 'unknown';
console.log(username); // ''这样就能正确地得到用户的 username。
结论
Nullish Coalescing Operator（??）是 ES2020 新增的一个运算符，主要用于取值时处理 null 或 undefined 的情况。与逻辑或操作符不同，它只会在左操作数为 null 或 undefined 时返回右操作数，否则返回左操作数，避免了出现一些不必要的 bug。在使用可空变量时，建议使用该运算符来获得更准确的结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67315ad00bc820c582387eb1