可选链操作符（?.）和空值合并操作符（??）是ES2020引入的核心特性，前者用于安全访问深层嵌套属性（如data?.user?.profile?.name），遇null/undefined自动短路返回undefined；后者（如name ?? '匿名用户'）仅在左侧为null或undefined时提供默认值，不误判0、false、空字符串等假值。
直接用点号或方括号一层层访问就行，但深层嵌套容易报错，得加安全判断。推荐用可选链操作符（?.）或自定义安全取值函数。
用可选链操作符（?.）最简洁
ES2020 引入的 ?. 能自动跳过 null 或 undefined，避免报错。
-
data?.user?.profile?.name→ 如果中间任意一层是null或undefined，整个表达式返回undefined，不会报Cannot read property 'xxx' of undefined -
data?.items?.[0]?.title→ 支持数组索引和属性混合写法 - 注意：只对对象属性和数组索引有效，不能用于函数调用（除非配合空值合并
??）
用空值合并操作符（??）设默认值
配合 ?. 给深层属性提供兜底值，让逻辑更健壮。
const name = data?.user?.profile?.name ?? '匿名用户';const count = data?.stats?.total ?? 0;- 它只在左侧为
null或undefined时生效，0、false、''不会触发默认值
手写安全取值函数（兼容老环境）
如果项目还要支持 IE 或旧版 Node.js，可以封装一个通用函数：
立即学习“Java免费学习笔记（深入）”；
- 接受对象和路径字符串（如
'user.profile.avatar.url'或数组形式['user', 'profile', 'avatar', 'url']） - 内部用
reduce逐层检查，遇到undefined就提前返回undefined - 示例：
get(data, 'a.b.c', 'default')—— 第三个参数是可选默认值
用解构赋值 + 默认值简化常用场景
对结构相对固定的 JSON，解构配合默认值很直观：
const { user = {} } = data;const { profile = {}, avatar = {} } = user;const { url = '/default.png' } = avatar;- 适合已知大致结构、只取少数几个字段的情况，比层层
?.更易读
不复杂但容易忽略细节，关键是根据运行环境和使用频率选对方法：新项目优先用 ?. 和 ??；老环境补个工具函数；结构简单时解构也够用。
