17370845950

JavaScript可选链操作符（?.）用于安全访问嵌套属性，遇null/undefined即返回undefined而非报错；支持属性访问、方法调用、数组索引及动态属性；可与??配合提供默认值，但不可用于赋值且不校验类型合法性。

JavaScript可选链操作符（?.）是一种安全访问嵌套对象属性的语法，它能在遇到 null 或 undefined 时自动停止访问，返回 undefined 而不是抛出错误。

避免“Cannot read property X of undefined”错误

传统方式访问深层属性时，需层层检查是否为 null 或 undefined：

❌ 麻烦且冗长：

const street = user && user.address && user.address.street;

✅ 使用可选链后简洁安全：

const street = user?.address?.street;

只要 user 或 address 是 null / undefined，整个表达式立刻返回 undefined，不再继续执行后续访问。

支持多种访问形式

可选链不仅适用于点号属性访问，还兼容以下场景：

• 方法调用：obj?.method?.() —— 只有 obj 和 method 都存在才执行
• 数组索引：arr?.[index] —— 防止对 undefined 数组取索引
• 动态属性名：obj?.[key] —— 安全读取计算属性

与空值合并操作符（??）配合使用

可选链常和 ?? 搭配，提供默认值：

const city = user?.address?.city ?? 'Unknown';

当 user?.address?.city 计算结果为 null 或 undefined 时，直接使用 'Unknown'，而不会把 0、false、'' 等假值覆盖掉。

注意边界情况

可选链只对左侧值做 null/undefined 判断，不校验类型是否合法：

• obj?.toString()：若 obj 是原始值（如字符串），会报错，因为原始值没有方法；可选链无法阻止这类错误
• obj?.nonExistentProp?.someMethod()：中间属性不存在，整体返回 undefined，不会报错
• 不能用于赋值：obj?.prop = value 是语法错误