在新推出的 ECMAScript 2019 中，新引入了一种运算符 nullish coalescing（空值合并），用于处理变量为空或者undefined的情况。本文将详细介绍该运算符的使用细节，以及如何在前端开发中合理使用。
什么是 nullish coalescing 运算符
nullish coalescing 运算符用于替代传统的 || 运算符，在某些特定情况下更为准确地确定变量值。该运算符用两个？号（??）表示，其语法为：
- -- --
该语法中，a 和 b 都是表达式。当 a 为 null 或 undefined 时，返回 b 的值，否则返回 a 的值。
与 || 运算符的区别
在之前的 JavaScript 版本中，我们通常使用 || 做为 null 或者 undefined 的默认值。例如：
----- - - ----- -- ----------
但是这种写法在某些情况下会存在问题，考虑下面的代码：
----- - - ------ --- -- ---------- ----- - - ------ --- -- ---------- --------------- -- ------ --- --------------- -- ------ ---
可以看到，当 x 使用 || 运算符时，返回了不是我们期望的 'default'，这是一种常见的坑点。而 nullish coalescing 运算符可以正确地返回期望的 'default'：
----- - - ------ --- -- ---------- --------------- -- ---------
如何精选 nullish coalescing 运算符
在实际项目中，我们可能会遇到多个变量需要做默认值，此时需要注意使用nullish coalescing 运算符。
----- - - -------- - - - - - -- ----- - - - -- -- ----- - - - -- --
如果 a 是一个空字符串，则 x 和 y 都会选择 b ，但是 z 会选择 a，这是因为 a 的值不是 null 或 undefined。这是一个非常微妙的区别，需要非常注意。
了解 nullish coalescing 运算符的优先级
在使用过程中需要注意的是，nullish coalescing 运算符的优先级比 || 运算符更低，是所有运算符中最低的。因此在使用时，需要特别注意。
以下代码可以帮助我们了解不同运算符的优先级：
----- - - ---- -- --------- -- -------- --------------- -- ---------
我们期望的输出应该是 'hello'，但是实际上返回的是 undefined，这是因为 || 运算符优先级高于 nullish coalescing 运算符，因此可以这样改写代码：
----- - - ----- -- ---------- -- -------- --------------- -- -------
总结
本文详细介绍了 ECMAScript 2019 中的 nullish coalescing 运算符的使用细节，与传统的 || 运算符的区别以及一些注意事项。在实际项目中，需要特别注意 nullish coalescing 运算符的使用，避免出现不必要的错误。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/659249eaeb4cecbf2d723907