在 JavaScript 中，访问对象中不存在的属性、访问 undefined 变量等操作常常会导致运行时错误。这些错误不仅会影响程序的可靠性和稳定性，也会增加代码的复杂度和维护难度。为了解决这个问题，ES10 新增了一个空值合并操作符 ??，可以方便地处理空值访问错误。
空值合并操作符的基本用法
空值合并操作符可以用来判断一个值是否为 null 或 undefined，并在它们为真时返回一个默认值。它的语法如下：
const result = valueA ?? valueB;
如果 valueA 不为 null 或 undefined，则返回 valueA；否则返回 valueB，即默认值。这里的 ?? 是一个新的操作符，可以看成是逻辑或操作符 || 的升级版，但只有在前面的表达式为 null 或 undefined 时才会返回后面的默认值。
下面是一个简单的示例，用空值合并操作符判断对象属性的值是否存在，如果不存在就使用默认值：
-- -------------------- ---- ------- ----- ------ - - ----- ------- ---- ----- -- ----- ---- - ----------- -- ---------- ------------------ -- ------ ----- --- - ---------- -- --- ----------------- -- --
可以看到，当对象属性的值为 null 时，空值合并操作符会忽略默认值，返回原始的值。
空值合并操作符的高级用法
空值合并操作符不仅可以用于判断对象属性的值是否存在，还可以用于处理更复杂的值，例如数组、函数等。下面是一些高级用法。
用空值合并操作符处理数组
空值合并操作符可以用来处理数组中的 null 或 undefined 值。例如，我们可以使用空值合并操作符将数组中的第一个非空值作为默认值：
const values = [null, undefined, false, 0, '']; const firstNotEmptyValue = values[0] ?? values[1] ?? values[2] ?? values[3] ?? values[4] ?? 'Unknown'; console.log(firstNotEmptyValue); // false
这里使用了多个空值合并操作符，如果数组中存在非空值，则返回该值；否则返回默认值。
用空值合并操作符处理函数返回值
空值合并操作符还可以用来处理函数返回值，例如，我们可以使用空值合并操作符将函数的返回值与默认值合并：
-- -------------------- ---- -------
-------- --------- -- -
-- -- --- -- -
------ -----
-
------ - - --
-
----- ------ - ---------- -- -- ------- -------- -- ------
-------------------- -- ------- -------- -- -----这里的 divide 函数用于计算两个数的商，并在 b 为 0 时返回 null。我们可以使用空值合并操作符将其返回值与默认值合并，以避免取到 null 值。
用空值合并操作符处理复杂表达式
空值合并操作符还可以用于处理复杂的表达式，例如，我们可以使用空值合并操作符将多个表达式合并，并返回第一个非空值：
const value1 = null; const value2 = undefined; const value3 = 'Hello, world!'; const value4 = 0; const result = (value1 || value2) ?? (value3 && value4) ?? 'Unknown'; console.log(result); // 0
这里使用了多个逻辑或和逻辑与操作符，将多个表达式合并，并返回第一个非空值。可以看到，使用空值合并操作符可以使代码更加简洁易懂。
总结
空值合并操作符是 ES10 引入的新特性，它可以方便地处理 JavaScript 程序中的空值访问错误。使用空值合并操作符，可以使代码更加简洁易懂，避免不必要的错误和异常。
不过需要注意的是，空值合并操作符只能判断 null 或 undefined 值，不能判断其他假值，如 false、0、'' 等。如果需要处理这些值，仍然需要使用逻辑或和逻辑与操作符。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6503e8a295b1f8cacd0ab5ee