可选链(?.)是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”,两者常组合使用:
立即学习“Java免费学习笔记(深入)”;
- 单独用
?.:得到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 —— 每个 ?. 只保护紧邻的下一次访问。










