在前端开发中，经常需要处理对象或数组中的数据。在 JavaScript 中，访问对象中的某个属性或数组中的某个元素时，如果该属性或元素不存在，就会返回 undefined，如果继续使用这个值进行操作，很容易导致错误。ES9 提供了可选链式运算符和 Nullish Coalescing 运算符来解决这个问题。
可选链式运算符
JavaScript 中访问对象属性或数组元素的方式通常是通过点符号或方括号，例如：
const user = {
name: "John",
address: {
city: "New York"
}
};
const cityName = user.address.city;当属性 address 不存在时，尝试访问 address 的 city 属性就会返回 TypeError。为了避免这种情况，可以使用可选链式运算符 ?.：
const cityName = user.address?.city;
当属性 address 不存在时，访问 ?. 后面的属性将会返回 undefined，而不会导致错误。
可选链式运算符可以链式使用，例如：
-- -------------------- ---- -------
----- ---- - -
----- -------
-------- -
----- -
----- ---- ------
---- -------
-
-
--
----- ------- - ------------------------当对象的一层或多层属性不存在时，使用可选链式运算符将更加简单和安全。
Nullish Coalescing 运算符
在 JavaScript 中，当某个变量的值为 undefined 或 null 时，可以使用逻辑或运算符 || 返回一个默认值。例如：
const x = value || "default";
当 value 为假值时（包括 undefined 和 null），返回 "default"。
然而，当 value 的值为 '' 或 0 时，逻辑或运算符也会返回默认值，这不符合预期。
为了解决这个问题，ES9 引入了 Nullish Coalescing 运算符 ??，只有在变量值为 null 或 undefined 时才返回默认值。例如：
const x = value ?? "default";
当 value 为 '' 或 0 时，不会返回默认值。
示例代码
下面是一个使用可选链式运算符和 Nullish Coalescing 运算符的示例：
-- -------------------- ---- -------
----- ---- - -
----- -
----- -------
-------- -
----- ---- ------
---- --
-
-
--
----- ------- - --------------------- -- ----------
----- -------- - ----------------------- -- ----------当 zip 为空字符串时，zipCode 将会返回 "unknown"，而当 city 不存在时，cityName 将会返回 "unknown"。
除了对象属性和数组元素外，可选链式运算符也可以用于函数调用：
const result = obj?.fn(param);
当对象 obj 存在且具有 fn 方法时，返回 fn(param) 的结果，否则返回 undefined。
Nullish Coalescing 运算符也可以用于默认参数的赋值：
function multiply(a = 0, b = 0) {
return a * b;
}
const result = multiply(0, 0) ?? "unknown";当 a 和 b 的值为 0 时，result 将会返回 "unknown"。
结论
可选链式运算符和 Nullish Coalescing 运算符是 ES9 中非常有用的新特性，可以帮助我们更加方便和安全地处理对象和数组中的数据。使用这两个运算符可以避免访问不存在的属性或变量，从而避免因此导致的代码错误。在日常开发中，推荐使用这两个运算符来提高代码的可读性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674847cc93696b0268eea926