JavaScript 中的 ?. 是可选链操作符（Optional Chaining Operator），属于 ES2020（ES11）的新特性。它用于简化访问嵌套对象属性时的安全性检查，避免因中间属性不存在而导致的 TypeError。

核心作用

当访问对象的深层属性时，如果某个中间层级的值为 null 或 undefined，可选链会立即短路，返回 undefined，而不会抛出错误。

使用场景

1. 访问对象属性

const value = obj?.prop;

// 等效于：obj ? obj.prop : undefined

2. 动态属性或数组索引

const propName = 'key';

const value = obj?.[propName]; // 动态属性

const item = arr?.[0]; // 数组索引

3. 安全调用函数

const result = func?.(); // 如果func存在则调用，否则返回undefined

4. 配合删除操作

delete obj?.prop; // 若obj存在则删除prop，否则不操作

注意事项

• 短路特性：仅当左侧为 null 或 undefined 时停止访问。
• 不可赋值：不能用于赋值左侧，如obj?.prop = 1会报错。
• 优先级：可选链的优先级高于普通 . 操作符，需用括号控制逻辑，例如 (a?.b).c。
• 假值处理：若左侧为其他假值（如空字符串、0），仍会继续访问属性，可能返回undefined（如 0?.a）。

示例

const user = {

address: {

street: "Main St"

}

};

// 传统写法

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

// 可选链写法

const street = user?.address?.street; // "Main St"

const invalid = user?.invalidProp?.subProp; // undefined，不报错

兼容性

需注意环境支持（如旧浏览器不支持），可通过Babel等工具转译。

总结

可选链 ?. 通过简洁的语法提升代码健壮性，特别适用于处理不确定结构的对象，减少冗余的类型检查代码。

好了，爱学习的小伙伴，更多精彩，关注不迷路哟～