在前端开发中，我们经常会遇到变量为空的情况，如果不加以判断，就会出现一些无法预料的错误。为了解决这个问题，ES12 引入了非空操作符，可以帮助我们更加方便地处理这种情况。
什么是非空操作符
非空操作符 ?? 是 ES12 新增的一个操作符，它用于判断一个变量是否为 null 或 undefined，如果是则返回一个默认值。它的语法如下：
a ?? b
上面的代码表示，如果变量 a 不为 null 或 undefined，则返回 a 的值，否则返回 b 的值。
非空操作符的优点
使用非空操作符的好处在于可以减少代码中的冗余判断，提高代码的可读性和健壮性。比如下面的代码：
let name;
if (user && user.name) {
name = user.name;
} else {
name = 'Unknown';
}可以使用非空操作符进行简化：
const name = user?.name ?? 'Unknown';
这样就不需要手动判断 user 和 user.name 是否为空了，代码更加简洁易读。
非空操作符的使用注意事项
需要注意的是，非空操作符只能用于判断 null 或 undefined，对于其他 falsy 值（如 0、''、false 等），非空操作符并不会返回默认值。比如下面的代码：
const a = 0; const b = a ?? 1; console.log(b); // 0
上面的代码中，变量 a 的值为 0，但是使用非空操作符判断时并不会返回默认值 1。
另外，非空操作符的优先级较低，需要注意与其他操作符的结合使用。比如下面的代码：
const a = null; const b = a || 'default'; const c = a ?? 'default'; console.log(b); // 'default' console.log(c); // 'default'
上面的代码中，变量 b 使用了逻辑或操作符，而变量 c 使用了非空操作符。由于逻辑或操作符的优先级高于非空操作符，所以变量 b 的值为 'default'，而变量 c 的值为 'default'，这点需要注意。
非空操作符的兼容性问题
由于非空操作符是 ES12 新增的语法，所以在一些老版本的浏览器中可能会出现兼容性问题。不过，我们可以使用 Babel 等工具将代码转换为 ES5 或 ES6 的语法，以解决这个问题。
总结
非空操作符是一种方便的语法，可以帮助我们更加方便地处理变量为空的情况，减少代码中的冗余判断，提高代码的可读性和健壮性。同时，需要注意非空操作符只能用于判断 null 或 undefined，对于其他 falsy 值并不会返回默认值。在使用时，还需要注意与其他操作符的结合使用，以及兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658e2287eb4cecbf2d3f386d