什么是javascript可选链_如何安全地访问嵌套对象属性

JavaScript可选链（?.）用于安全访问嵌套属性、方法或数组元素，遇null/undefined立即返回undefined而不报错；支持属性访问、函数调用、数组索引三种形式，并可与??配合提供默认值，但不可用于赋值。

JavaScript 可选链（Optional Chaining）是一种安全访问嵌套对象属性的语法，它允许你在访问深层属性、方法或数组元素时，自动处理中间环节可能为 null 或 undefined 的情况，避免运行时报错。

可选链的基本写法：用 ?. 替代 .

传统方式访问嵌套属性容易报错：

const name = user.profile.name; // 如果 user 或 profile 是 undefined，会抛出 TypeError

使用可选链后：

const name = user?.profile?.name; // 若 user 或 profile 为 null/undefined，直接返回 undefined，不报错

它不会“跳过”整个表达式，而是从第一个为 null 或 undefined 的左侧值开始，立即返回 undefined，后续不再执行。

支持的三种可选链操作形式

• 属性访问：obj?.prop 或 obj?.['prop']
• 函数调用：obj?.method() —— 如果 method 不存在或为 undefined，不调用，返回 undefined
• 数组索引访问：arr?.[index] —— 若 arr 无效，不取值，返回 undefined

配合空值合并运算符 ?? 提供默认值

可选链本身返回 undefined，但你往往需要一个兜底值。这时可以和空值合并运算符搭配：

const city = user?.address?.city ?? '未知城市';

注意：?? 只在左侧为 null 或 undefined 时生效，不会被 false、0、'' 触发，比 || 更精准。

不能单独使用的场景（常见误区）

可选链必须出现在“安全访问”的上下文中，不能用于赋值或声明：

• ❌ user?.profile = {} —— 语法错误，不可赋值
• ❌ let name = user?.profile?.name; —— 这句本身合法，但若想给 user?.profile 赋新值，仍需先确保 user 存在
• ✅ 正确做法是：先检查再赋值，或用逻辑判断 + 解构默认值