ECMAScript 2020 新增了 Nullish Coalescing 运算符，可以方便地处理 undefined 和 null 的情况。在前端开发中，我们经常需要判断一个变量是否为 undefined，然后再进行操作，这样会增加代码的复杂度并且容易出错，而 Nullish Coalescing 运算符则可以帮助我们避免这些问题。
理解 Nullish Coalescing 运算符
Nullish Coalescing 运算符是一种逻辑运算符，用于判断左侧的操作数是否为 null 或者 undefined。如果是，则返回右侧的操作数，否则返回左侧的操作数。
Nullish Coalescing 运算符使用两个问号 "?? "表示，语法如下：
const result = a ?? b;
其中，a 和 b 都可以是任意的表达式，如果 a 不是 null 或 undefined，则返回 a，否则返回 b。
示例代码
下面给出几个示例来更加详细地了解 Nullish Coalescing 运算符的使用。
1. 检查对象属性是否存在
首先，如果我们想要检查一个对象的属性是否存在，通常会使用如下方式：
const obj = { name: '张三', age: 18 };
const name = obj.name !== undefined ? obj.name : '无名氏';
const gender = obj.gender !== undefined ? obj.gender : '未知';使用 Nullish Coalescing 运算符可以让代码更简洁：
const obj = { name: '张三', age: 18 };
const name = obj.name ?? '无名氏';
const gender = obj.gender ?? '未知';当 obj.name 为 null 或 undefined 时，name 变量会被赋值为 '无名氏'，同理，当 obj.gender 为 null 或 undefined 时，gender 变量会被赋值为 '未知'。
2. 设置默认值
另一个常见的使用场景是设置变量的默认值：
const maxCount = parseInt(inputValue) || 10;
在上面的代码中，如果 parseInt(inputValue) 的值为 NaN，则 maxCount 会被赋值为 10。但是，如果 inputValue 的值为 0 或者空字符串 ""，则 maxCount 也会被赋值为 10，这并不是我们期望的结果。
使用 Nullish Coalescing 运算符可以更好地设置默认值：
const maxCount = parseInt(inputValue) ?? 10;
如果 parseInt(inputValue) 的值为 NaN、null 或 undefined，则 maxCount 会被赋值为 10。
3. 避免函数参数报错
最后一个示例是避免函数参数报错的情况。有时候我们需要在调用函数时传递一些参数，但是这些参数本身并不一定都会存在，这时候就需要使用 Nullish Coalescing 运算符来避免报错了。
function getName(options) {
const name = options.name ?? '无名氏';
console.log(`我的名字叫做 ${name}`);
}
getName(); // "我的名字叫做 无名氏"在上面的代码中，options 实际上是一个可选参数，如果不传入 options 或者 options.name 为 null 或 undefined，那么 getName 函数会使用默认值 "无名氏"。
总结
在 ECMAScript 2020 中，Nullish Coalescing 运算符为我们提供了更加简洁、安全、可读性更高的代码实现方式。在日常的前端开发中，我们可以结合具体的场景使用 Nullish Coalescing 运算符，让代码更加优雅和健壮。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6495040248841e989424a655