可选链

一起看海

如果可选链 ?. 前面的值为 undefined 或者 null，它会停止运算并返回 undefined。

为了简明起见，在本文接下来的内容中，我们会说如果一个属性既不是 null 也不是 undefined，那么它就“存在”。

换句话说，例如 value?.prop：

如果 value 存在，则结果与 value.prop 相同，
否则（当 value 为 undefined/null 时）则返回 undefined。
下面这是一种使用 ?. 安全地访问 user.address.street 的方式：

let user = {}; // user 没有 address 属性

alert( user?.address?.street ); // undefined（不报错）
代码简洁明了，也不用重复写好几遍属性名。

这里是一个结合 document.querySelector 使用的示例：

let html = document.querySelector('.elem')?.innerHTML; // 如果没有符合的元素，则为 undefined
即使 对象 user 不存在，使用 user?.address 来读取地址也没问题：

let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined
请注意：?. 语法使其前面的值成为可选值，但不会对其后面的起作用。

例如，在 user?.address.street.name 中，?. 允许 user 为 null/undefined（在这种情况下会返回 undefined）也不会报错，但这仅对于 user。更深层次的属性是通过常规方式访问的。如果我们希望它们中的一些也是可选的，那么我们需要使用更多的 ?. 来替换 .。

不要过度使用可选链
我们应该只将 ?. 使用在一些东西可以不存在的地方。

例如，如果根据我们的代码逻辑，user 对象必须存在，但 address 是可选的，那么我们应该这样写 user.address?.street，而不是这样 user?.address?.street。

那么，如果 user 恰巧为 undefined，我们会看到一个编程错误并修复它。否则，如果我们滥用 ?.，会导致代码中的错误在不应该被消除的地方消除了，这会导致调试更加困难。

?. 前的变量必须已声明
如果未声明变量 user，那么 user?.anything 会触发一个错误：

// ReferenceError: user is not defined
user?.address;
?. 前的变量必须已声明（例如 let/const/var user 或作为一个函数参数）。可选链仅适用于已声明的变量。