在编写前端代码时，经常会遇到需要设置默认值的情况。此时我们通常会使用 || 运算符判断一个变量是否为空，然后给它一个默认值，例如：
let foo = null; let bar = foo || 'default'; console.log(bar); // 输出: default
使用 || 运算符的问题在于，它在判断变量是否为空时，会将一些其它类型的数据（例如数字0和空字符串）也视为 falsy 值，这可能导致一些不该被覆盖的值也被设置了默认值，从而引发 bug。
好在 ECMAScript 2020 标准引入了一个新的操作符：nullish 合并操作符（??），用于解决这个问题。nullish 合并操作符只在左侧变量为 null 或 undefined 时，才会使用右侧的默认值。
以下是一个使用 nullish 合并操作符的示例：
let foo = null; let bar = foo ?? 'default'; console.log(bar); // 输出: default
通过上述代码，我们可以看到若变量 foo 为空，则 bar 将被赋值为默认值 default。
除了与 null 或 undefined 进行比较，nullish 合并操作符也可以用于数组和对象。例如：
const obj = { foo: null };
const a = obj.foo ?? 'bar';
console.log(a); // 输出: bar
const arr = [null, undefined, 0, '', false];
const b = arr[2] ?? 'default';
console.log(b); // 输出: 0需要注意的是，在使用 nullish 合并操作符时，应确保目标环境已支持该操作符，否则代码可能无法正确运行。一种简单的解决方案是使用 Babel 等工具将 ES2020 的代码转换为 ES5 进行部署。
综上，nullish 合并操作符是一种简便且安全的变量初始化方式，能够有效避免一些潜在的 bug。
总结
- ECMAScript 2020 引入了 nullish 合并操作符，用于解决使用 || 运算符判断变量是否为空时的一些问题。
- 使用 nullish 合并操作符可以在一定程度上避免影响逻辑的默认值设置错误。
- 需要注意在目标环境已支持 nullish 合并操作符之后再使用该操作符。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6583a7fdd2f5e1655de7f075