JavaScript中可选链操作符在访问深层属性时应用

可选链操作符（?.）安全访问嵌套属性，遇 NULL/undefined 返回 undefined 而不报错；支持点号、方括号、函数调用、数组索引；宜与 ?? 合用提供默认值；不可用于赋值左侧，且需避免掩盖数据结构问题或跳过副作用逻辑。

可选链操作符（?.）让访问嵌套对象属性更安全，避免因中间某层为 null 或 undefined 而抛出错误。

访问深层属性时防止报错

传统写法需层层判断，比如：
user && user.profile && user.profile.address && user.profile.address.city
用可选链只需：
user?.profile?.address?.city
任一环节为 null 或 undefined，整个表达式直接返回 undefined，不继续执行后续访问。

支持多种访问形式

可选链不仅适用于点号属性访问，还兼容以下场景：

• 方括号属性访问：如 obj?.['prop-name']，适合属性名含特殊字符或动态生成
• 函数调用：如 obj?.method?.()，先检查方法是否存在再调用，避免 TypeError: obj.method is not a function
• 数组索引访问：如 arr?.[0]?.name，确保数组存在且首项非空后再取 name

注意与空值合并操作符配合使用

单独用 ?. 返回 undefined，常需提供默认值。推荐搭配空值合并操作符 ??：

const city = user?.profile?.address?.city ?? '未知城市';
这样既安全又简洁，比用逻辑或 || 更准确（避免 0、false、'' 等假值被误替换）。

不能滥用，需明确语义边界

可选链只适用于“可能不存在”的属性访问，不是万能兜底方案：

• 若某个属性按设计必须存在，却用了 ?.，反而掩盖了数据结构问题
• 链中某步是方法调用，但该方法有副作用（如发请求、改状态），用 ?. 可能导致逻辑跳过，需谨慎评估
• 不支持在赋值左侧使用，例如 obj?.prop = value 会语法报错