可选链是什么？如何安全访问属性？

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《可选链是什么？如何安全访问属性？》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

可选链?.是ES2020正式引入的运算符，用于安全访问嵌套属性或调用方法，遇null/undefined即停止并返回undefined，不提供默认值，仅适用于读取操作且不可用于赋值左侧。

可选链 ?. 是什么

可选链不是语法糖，而是 JavaScript 正式引入的运算符（ES2020），用来避免在访问嵌套属性时因某一层为 null 或 undefined 而抛出 TypeError。它不会“自动兜底”成空对象或默认值，只是在遇到 null 或 undefined 时立即停止访问、返回 undefined。

怎么用 ?. 安全访问对象属性

核心规则：只在你**不确定某个中间对象是否存在**时才加 ?.，不是所有点都要换。常见误用是给根对象也加 ?.，但根变量本身没被声明或为 undefined 时，obj?.a 仍会报错——因为 obj 不在作用域里，根本轮不到可选链生效。

• user?.profile?.avatar?.url ✅ 安全：任一环节为 null/undefined，整个表达式返回 undefined
• user.profile?.avatar.url ❌ 危险：若 user 为 undefined，直接报 Cannot read property 'profile' of undefined
• arr?.[0]?.name ✅ 支持数组索引访问
• fn?.(arg) ✅ 支持安全调用函数（但注意：fn 是 null 时不会执行，也不会报错）

可选链和空值合并 ?? 配合使用

可选链自己不提供默认值，常和空值合并运算符 ?? 组合来补缺。注意别和逻辑或 || 混用：?? 只在左侧为 null 或 undefined 时生效；|| 会在 0、''、false 时也触发，默认行为不符合预期。

const displayName = user?.name ?? 'Anonymous';
const avatarSize = user?.settings?.avatarSize ?? 48; // 即使 avatarSize 是 0，也会用 48 吗？不会 —— 0 是有效值，?? 不触发

容易踩的坑

可选链不能跨函数作用域，也不能用于赋值左侧；它只对「读取」操作有效。另外，V8 和现代浏览器支持良好，但 IE 完全不支持，Node.js 需 v14+（且需启用 ES2020）。

• user?.name = 'Alice' ❌ 语法错误：可选链不能出现在赋值左侧
• user?.[key] ✅ 支持动态属性名，但 key 必须已定义（否则 key 为 undefined 会导致 user?.[undefined]，结果仍是 undefined，不报错）
• 链中混用括号易出错：obj?.method()?.data 表示先安全调用 method()，再读 data；而 (obj?.method)()?.data 是另一种语义，慎用

理论要掌握，实操不能落！以上关于《可选链是什么？如何安全访问属性？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！