如何通过 可选链与空值合并的组合技 彻底告别Cannot read property

可选链（?.）与空值合并（??）组合使用可安全访问嵌套属性并提供默认值：?.在遇到null/undefined时静默返回undefined，??仅对null/undefined提供默认值，保留0、''、false等假值，二者配合能有效避免“Cannot read property”错误。

直接用 ?. 配合 ??，就能让“Cannot read property 'x' of undefined”这类错误基本消失。关键不是单个用，而是组合起来覆盖“访问可能为空”和“提供安全默认值”两个环节。

用可选链（?.）切断错误传播链

传统写法要层层判断：user && user.profile && user.profile.avatar && user.profile.avatar.url，既啰嗦又易漏。可选链把它压成一行，中间任意一环是 null 或 undefined，整个表达式就安静返回 undefined，不报错也不中断执行。

• user?.profile?.avatar?.url —— 安全读取嵌套属性
• data?.items?.[0]?.name —— 安全访问数组元素及其属性
• obj?.method?.() —— 安全调用可能不存在的方法（注意括号位置）

用空值合并（??）精准兜底，默认只在真正空时生效

?? 和 || 最大区别：它只对 null 和 undefined 触发默认值，而 0、''、false 这些“假值”会被原样保留——这才是业务中真正需要的逻辑。

• user?.age ?? 18 → 用户没传 age（undefined）才用 18；传了 0 就显示 0
• config?.theme ?? 'light' → 主题配置缺失才切回浅色；配置为 '' 或 'dark' 都照常生效
• 别再用 user.name || '匿名用户'，改用 user?.name ?? '匿名用户'

组合技实战：一步到位获取可用值

把两个操作符串起来，就是最常用的“安全读取 + 安全兜底”模式。它天然适配接口数据结构不稳定、字段可选、后端返回不规范等真实场景。

• response?.data?.user?.settings?.language ?? 'zh-CN'
• order?.items?.find(item => item.id === targetId)?.price ?? 0
• form?.values?.email?.toLowerCase() ?? ''（注意方法调用也要加 ?.）

注意边界：它们不解决所有问题

可选链和空值合并只处理 null/undefined 引发的属性访问错误，不是万能异常捕获器：

• 不会防止 TypeError: xxx is not a function —— 调用前仍需确认类型（如 typeof fn === 'function'）
• 不会绕过 ReferenceError（变量未声明）或 SyntaxError
• 对 undefined 数组索引（如 arr[5]）本身返回 undefined，不报错；但 arr[5]?.prop 才真正安全