可选链操作符

【知识】可选链接改变了从深度嵌套对象访问属性的方式。它解决了在 JavaScript 中访问一长串对象属性时必须进行多次 null 检查的问题。
【例子】

obj = {
  prop1: {
    prop2: {
      someProp: "value",
    },
  },
};

在 JavaScript 中访问对象中不存在的键会返回 undefined，如果您继续尝试访问嵌套值并且父键不存在，那么会导致TypeError: Cannot read property ... of undefined错误。因此您在访问对象时，必须先判断键是否存在，存在才继续访问，你会经常看见如下形式代码：

obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2.someProp;

可见，上述代码十分冗长。可选链正是解决了这一问题。它让我们将上面的整个代码重构为以下内容：

obj.prop1?.prop2?.someProp;

如果其中一个属性是 null 或 undefined，则可选链?.将停止读取您要求它读取的属性并返回 undefined.

【知识】可选链存在变体

1. obj?.prop —— 如果 obj 存在则返回 obj.prop，否则返回 undefined。
2. obj?.[prop] —— 如果 obj 存在则返回 obj[prop]，否则返回 undefined。
3. obj.method?.() —— 如果 obj.method 存在则调用 obj.method()，否则返回 undefined。

【提问1】如何正确的使用可选链？

• 根据我们的代码逻辑，仅在当左侧部分不存在也可接受的情况下使用为宜。
• 只有在属性可选的时候才使用可选链
  

【提问2】什么情况是左侧部分不存在也可接受？

空值合并运算符