什么是可选链_JavaScript中如何安全访问嵌套属性

可选链（?.）是JavaScript正式引入的短路访问操作符，用于在访问嵌套属性时自动跳过null或undefined并返回undefined而不报错。

可选链（?.）是什么

可选链不是语法糖，而是 JavaScript 正式引入的**短路访问操作符**，用于在访问嵌套对象属性时自动跳过 null 或 undefined。它不会抛出错误，而是直接返回 undefined。

什么时候必须用 ?. 而不是点号

当你不确定某个中间层级是否存在时，比如从 API 响应中取 user.profile.address.city，而 profile 或 address 可能为 null，此时直接用点号会报 Cannot read property 'address' of null。

• 常见错误场景：解析后端返回的非严格结构数据、处理用户未填写的表单字段、读取 localStorage 中可能不存在的键值
• ?. 只对左侧值为 null 或 undefined 时生效；其他假值（如 0、false、''）不影响后续访问
• 不能替代类型检查 —— 它不改变值本身，只是避免报错；后续仍需判断是否真为 undefined

?. 和 ?.括号调用、数组索引的区别

可选链支持三种写法，对应不同访问方式，不能混用：

• 属性访问：obj?.prop
• 方法调用：obj?.method()（仅当 obj.method 是函数才执行，否则跳过）
• 数组索引：arr?.[index]（注意是 ?. 后跟方括号，不是 ?[）
• 错误写法：obj?['prop']（语法错误）、obj?.[0]?.name（合法，但要注意每层都需显式加 ?. ）

const data = { user: { profile: null } };
console.log(data.user?.profile?.address?.city); // undefined，不报错
console.log(data.user.profile.address.city);    // TypeError

和逻辑运算符 && 或空值合并 ?? 怎么配合用

?. 解决“访问安全”，??解决“默认值 fallback”，两者常组合使用：

• 单独用 ?. ：得到 undefined，但你可能需要一个默认字符串或数字
• 推荐组合：obj?.prop?.nested ?? 'default'
• 避免滥用 &&：比如 obj && obj.prop && obj.prop.nested 冗长且对 0/false 等假值误判
• 注意优先级：?. 低于 ?? 和 &&，所以 a?.b ?? c 等价于 (a?.b) ?? c，无需额外括号

const response = { data: { items: [] } };
const firstItemName = response?.data?.items?.[0]?.name ?? 'No name';

真正容易被忽略的是：可选链**不能跨变量使用**，比如 obj?.a.b?.c 中，如果 a 存在但 a.b 是 undefined，那 a.b?.c 这部分仍安全；但如果你写成 obj?.a?.b.c，就要求 a 和 b 都得存在才能进到 c —— 每个 ?. 只保护紧邻的下一次访问。