在 ES11 （也就是 ECMAScript 2020）中，引入了一个新的操作符——空值合并操作符（nullish coalescing operator），也称为 null 合并运算符。
空值合并操作符可以帮助我们更方便地处理 undefined 或 null 值的情况。在过去，我们通常需要使用短路运算符（||）来判断一个值是否为 undefined 或 null，如果是的话就使用默认值。但这种方法在某些情况下会出现问题，例如当值为 0 或空字符串时，短路运算符也会被判断为假值，从而使用默认值。因此，在这种情况下，空值合并操作符会更加准确和安全。
空值合并运算符的语法
空值合并操作符的语法是 ??，这个操作符用于检查左侧操作数的值是否为 null 或 undefined，如果是的话就返回右侧操作数的值，否则返回左侧操作数的值。具体可以看下面的代码示例。
--- ------ - ------ -- -------
其中，value1 是要检查的变量或表达式，value2 是默认值。
空值合并运算符的示例
接下来我们来看一些不同场景下空值合并操作符的使用方法和效果。
示例一
在这个示例中，我们有一个数据对象 data，其中包含了两个属性值 name 和 age。我们想要打印出这些属性值，但是如果数据对象中某个属性为 undefined 或 null 时，就需要使用默认值。
----- ---- - -
----- ------
---- ---------
--
----- ---- - --------- -- ----------
----- --- - -------- -- ---
------------------ -- -----
----------------- -- --在这个例子中，我们对 name 和 age 分别使用了空值合并运算符。如果 data.name 和 data.age 为 undefined 或 null，那么就使用默认值，即 'Unknown' 和 18。
示例二
在这个示例中，我们需要从一个API返回的数据中获取用户的 email，但是这些数据不一定会包含 email 属性。
-- -- --- ----------
----- ------- - -
--- ---
----- ----- -----
-------- -
----- ---- ------
------ ----
-
--
----- ----- - ------------- -- ------
------------------- -- -----在这个例子中，我们使用了空值合并运算符来检查 apiData.email 是否存在。由于在 apiData 对象中没有 email 属性，因此会使用默认值 'N/A'。
示例三
在这个示例中，我们将检查一个函数 getValue() 的返回值是否为空。
-------- ---------- -
-- ----------- --- ---------
------ -----
-
----- ------ - ---------- -- ------
-------------------- -- -----在这个例子中，如果 getValue() 函数返回的是 undefined 或 null，那么就使用默认值 'N/A'。
最佳实践
有几个最佳实践可以帮助我们更好地使用空值合并操作符。
1. 避免混用空值合并运算符和逻辑或运算符
尽管空值合并运算符和逻辑或运算符在某种程度上可以实现相同的效果，但是它们的行为还是有所不同的。因此，避免在同一个表达式中混用这两个操作符，以免造成不必要的错误和混淆。
2. 设置默认值时需要小心
在设置默认值时，一定要慎重考虑默认值的类型和取值范围，以确保其与实际情况相符。如果没有准确的判断，可能会产生意想不到的错误。
3. 不要使用空值合并运算符来检查空字符串和数字零
在检查空字符串和数字零时，不要使用空值合并运算符，因为这些值会被解释为真值。为了安全起见，应该使用严格的相等运算符（===）来进行判断。
结论
空值合并操作符是 ES11 中一个非常有用的新增功能，可以帮助开发者更好地处理 null 或 undefined 值的情况，提高代码的可读性和健壮性。在使用空值合并操作符时，需要注意一些最佳实践以确保代码正确性，并合理设置默认值。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672ed700eedcc8a97c8affdf