在 JavaScript 的日常开发中，难免会遇到访问一个嵌套对象的某个属性时，往往会遇到该属性为空报错的情况。而 JavaScript ES11 中提供了两个新的操作符，它们可以帮助我们更方便地处理这种情况，这就是可选链操作符「?.」和空值合并运算符「??」。
可选链操作符「?.」
在 JavaScript 中，我们往往需要通过.符号来访问对象的某个属性，比如：
-- -------------------- ---- -------
----- ---- - -
----- --------
---- ---
-------- -
----- -----------
------- -------- -----
-
--
----- ---- - ------------------ -- ----------
----- -------- - ---------------------- -- ---------但是，如果该属性不存在，如 user.address.province，这时候将会返回 undefined，如果我们在这个结果继续使用，就会报错。为了避免这种情况，我们可以手动进行判断处理：
const province = user.address ? user.address.province : undefined;
但是，当对象的嵌套层数较深时，这种情况就变得十分复杂和冗长，可以使用可选链操作符「?.」来简化这个过程，它能够判断前面的对象是否为空或者是为 null，如果是空或者是 null，那么整个表达式将会返回 undefined，否则就继续执行后面的属性或方法。
const province = user?.address?.province;
我们不需要再手动对每个属性进行判断，直接使用「?.」进行链式调用即可，不仅代码简化了，也使得整个过程更加优雅和易读。
空值合并运算符（??）
空值合并运算符「??」用于取一个值，如果这个值不为空或者是未定义，则返回这个值，否则返回一个默认值。
const name = user.name ?? "Unknown"; const province = user?.address?.province ?? "Unknown";
在这里，如果 user.name 存在则会返回 user.name，否则返回 "Unknown"，如果 user?.address?.province 存在的话，就会返回 user.address.province，否则返回 "Unknown"。
总结
使用 ?. 和 ?? 做空值判断可以让代码更加清晰和易读，降低因为嵌套情况导致的代码冗长和可读性差的问题。这些新的操作符在新版 JavaScript 中已经得到了广泛的应用。
示例代码
下面是一些示例代码，来演示使用可选链操作符和空值合并操作符进行嵌套属性访问：
-- -------------------- ---- -------
----- ---- - -
----- --------
---- ---
-------- -
----- -----------
------- -------- -----
-
--
----- ---- - ----------
----- -------- - ---------------------- -- -- ---------- ------ ---- -------- ---------- -- ---------
----- ----- - -----------
----- --------- - ------------------------
----- ----- - --------- -- ----------
----- --------- - ----------------------- -- ----------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d29b92b5eee0b5259f4c01