可选链 ?. 是 JavaScript 原生支持的安全访问嵌套属性机制，用于避免因访问 null/undefined 的属性而抛出 TypeError；它只在遇到 null 或 undefined 时停止访问，对 0、false 等假值仍正常返回。
ypeError；它只在遇到 null 或 undefined 时停止访问，对 0、false 等假值仍正常返回。可选链 ?. 是什么，它解决什么问题？
可选链不是语法糖，而是 JavaScript 原生支持的「安全访问嵌套属性」机制。它直接切断对 undefined 或 null 值的后续属性访问，避免抛出 TypeError: Cannot read property 'x' of undefined 这类错误。
什么时候必须用 ?. 而不是普通点号？
当你不确定某个中间对象是否存在时——比如 API 返回数据结构不稳定、用户输入未初始化、或 DOM 元素可能尚未挂载。普通点号会立即崩溃，?. 会让整个表达式返回 undefined 而非报错。
- 访问对象属性：
user?.profile?.avatar?.url→ 如果user是null，整个表达式立刻返回undefined，不尝试读取profile - 调用方法：
getData?.()→ 如果getData不是函数或为undefined，不执行调用，返回undefined - 访问数组元素：
list?.[0]?.name→ 若list不存在，跳过索引访问
?. 和逻辑运算符 && 的关键区别
&& 是布尔短路，依赖「真值/假值」判断，会把 0、''、false 当作“空”而中断；?. 只在遇到 null 或 undefined 时停止，其余值（包括 0、false）照常访问。
const obj = { count: 0 };
obj?.count; // → 0（正确拿到值）
obj && obj.count; // → 0（看似一样，但只是巧合）
const obj2 = { items: null };
obj2?.items?.length; // → undefined（安全）
obj2 && obj2.items && obj2.items.length; // → undefined（等价但冗长且易错）
容易忽略的限制和坑
可选链不能用在赋值左侧，也不能跨作用域穿透变量声明；它只作用于「属性访问、方法调用、数组索引」这三种操作。
- ❌ 错误写法：
obj?.x = 1（语法错误，?.不能用于左值） - ❌ 错误写法：
foo?.bar.baz（若bar是undefined，?.只管前一个.，这里没加?.，仍会报错） - ✅ 正确写法：
foo?.bar?.baz - ⚠️ 注意：链式调用中混用普通点和可选链时，每个可能为空的中间环节都得显式加
?.
真正复杂的地方在于嵌套条件组合——比如 data?.items?.[index]?.details?.tags?.[0]，少一个 ?. 就可能在某个环境里静默失败。别依赖「看起来应该有」，只信任明确加了保护的操作。
