在 JavaScript 中，对于未定义、 null 和空字符串等空值所涉及到的处理，一度令开发者头疼不已。为了解决这个问题，ES12 中引入了空值合并运算符，可以方便地处理这些空值。
什么是空值合并运算符？
空值合并运算符（nullish coalescing operator）是 ES12 中新增的一种运算符，用于简化处理空值的场景。其表示为 ??。它的作用是如果该运算符左侧的操作数是 null 或 undefined，则返回右侧操作数，否则返回该运算符左侧操作数。
空值合并运算符的使用
下面我们来看一下它的使用示例：
-- -------------------- ---- ------- ----- - - --------- -- ---------- --------------- -- --------- ----- - - ---- -- ---------- --------------- -- --------- ----- - - ----- -- ---------- --------------- -- ----- ----- - - -- -- ---------- --------------- -- --
在第一个示例中，由于 x 的左侧是 undefined，所以最终的结果为右侧字符串 'default'。而在第二个示例中，由于 y 的左侧是 null，同样返回右侧的 'default' 。对于布尔值和空字符串，它们不属于空值，因此 z 和 m 都返回自身的值，即 false 和 ''。
空值合并运算符与逻辑或运算的区别
ES6 中的逻辑或运算符（||）也可以实现类似的功能，实际上二者的效果很相似。例如：
-- -------------------- ---- ------- ----- - - --------- -- ---------- --------------- -- --------- ----- - - ---- -- ---------- --------------- -- --------- ----- - - ----- -- ---------- --------------- -- --------- ----- - - -- -- ---------- --------------- -- ---------
在本例中，由于 undefined、 null、 false 和空字符串都是假值（falsy），所以逻辑或运算符都会返回其右侧的默认值 'default'。然而，在某些情况下二者的表现是不同的。例如：
-- -------------------- ---- ------- ----- - - -- ----- - - ----- ----- - - --- ----- - - - -- - -- -- --------------- -- -- ----- - - - -- - -- -- --------------- -- -
在这个例子中，变量 a 的值为 0，因为 0 也是假值，所以逻辑或运算符会继续往后检查下一个变量，也就是 b。由于 b 的值是 null，因此逻辑或运算符会返回空字符串。而空值合并运算符则会返回左侧变量 a 的值，即 0。
小结
通过对 ES12 中空值合并运算符的讲解，我们可以得出以下结论：
- 空值合并运算符的作用是返回左侧操作数，如果该操作数是 null 或 undefined，则返回右侧操作数。
- 空值合并运算符的使用可以简化处理空值的场景。
- 在进行多个值判断的情况下，空值合并运算符的表现和逻辑或运算符有所不同。
最后，我们再来说一下空值合并运算符的使用建议。由于小心谨慎永远是最明智的策略，我们在使用空值合并运算符时，一定要注意审查代码逻辑，确保使用正确。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670920aad91dce0dc876ab58