在前端开发过程中，我们常常需要将两个值进行合并。但是在合并的过程中，往往会遇到一些问题，比如无法判断 null 或 undefined 值，从而导致 Null 或 Undefined 相关的 bug。在 ES12 之前，我们可以使用逻辑或运算符（||）或者三目运算符来解决这个问题。但是新的 ES12 引入了 Nullish 合并操作符，可以更好地避免这些问题。
Nullish 合并操作符介绍
Nullish 合并操作符是两个问号（??）组成的一个新的操作符，它只在左侧的数值为 null 或者 undefined 时才会返回右侧的值，否则返回左侧的值。这个操作符优先级比 || 和 && 更低。
下面是一个示例代码：
-- -------------------- ---- ------- ----- --- - --------- -- ---------- ----------------- -- --------- ----- --- - ---- -- ---------- ----------------- -- --------- ----- --- - - -- ---------- ----------------- -- - ----- --- - ----- -- ---------- ----------------- -- -----展开代码
在这个示例中，当变量 foo 和 bar 均为 null 或 undefined 时，它们都被赋值为默认值 'default'。
Nullish 合并操作符的使用场景
Nullish 合并操作符可以用于任何判断 JavaScript 中的 null 或 undefined 的场景。尤其是在对象属性和函数参数的赋值时，更容易产生 Null 或 Undefined 相关的问题。此时，Nullish 合并操作符可以更好地避免产生这些问题。
对象属性的赋值
在 JavaScript 中，当指定对象的某个属性为 null 或 undefined 时，我们往往需要判断这个属性的值，如果是 null 或 undefined，就为该属性指定一个默认值。如果我们使用常规的 || 运算符来赋值，当该属性值为 0 或 false 时，也会被当做 null 或 undefined 处理。也就是说，需要判断该属性的值是否为 null 或 undefined，并且同时不为 0 或 false。
使用 Nullish 合并操作符就可以更好地解决这个问题。下面是一个对象属性赋值的示例：
-- -------------------- ---- ------- ----- --- - - -- ---------- -- ----- -- -- -- ----- - ----- - - ----- -- ---------- ----- - - ----- -- ---------- ----- - - ----- -- ---------- ----- - - ----- -- ---------- -------------- -- -- --- -- ---------- ---------- -- -----展开代码
在这个示例中，Nullish 合并操作符只在 a 和 b 的属性值为 null 或 undefined 时才返回默认值 'default'。
函数参数的赋值
在 JavaScript 中，我们常常需要对函数的参数进行赋值。如果该参数为 null 或 undefined，我们常常需要为其定义一个默认值。
使用 Nullish 合并操作符，可以简化函数参数表达式，从而避免传递 null 或 undefined 值。下面是一个函数默认值赋值的示例：
-- -------------------- ---- ------- -------- --------- ---- ------- - ---- - ---- -- ---------- --- - --- -- -- ------ - ------ -- ---------- --------------- ---- -- -------- --- -- ------- ------ -- ------------ - ------------ --- ---------- ---------- ----- --------展开代码
在这个示例中，Nullish 合并操作符只在参数的值为 null 或 undefined 时构造默认值。这样可以有效避免产生类似参数传递错误的问题。
总结
使用 Nullish 合并操作符可以更好地避免 Null 或 Undefined 相关的 bug。尤其是在对象属性和函数参数的赋值时，避免产生类似参数传递错误的问题。当然，在使用 Nullish 合并操作符时，需要考虑到可能存在的其他问题，建议仔细阅读相关文档，严格遵循规范。
参考资料：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648bd3c248841e9894a1f70b
