可选链（?.）和空值合并（??）是ES6+中解决空值困扰的两个核心语法糖：?.用于安全访问深层属性、方法或数组索引，遇null/undefined即返回undefined而不报错；??仅在左侧为null或undefined时返回右侧默认值，避免误覆盖0、''、false等合法假值；二者常组合使用，如user?.profile?.avatar?.url ?? '/default.png'，显著提升代码安全性与可读性。
可选链（?.）和空值合并（??）是 ES6+ 中真正解决“空值困扰”的两个实用语法糖。它们不改变逻辑本质，但让代码更直白、更安全、更少出错。
用 ?. 避免深层属性访问报错
当你需要读取 user.profile.avatar.url 这类嵌套属性时，传统写法得层层判断：
user && user.profile && user.profile.avatar && user.profile.avatar.url- 一旦中间某层是
null或undefined，整个表达式就短路为false，但你可能其实需要undefined而不是布尔值
换成可选链后，直接写：
-
user?.profile?.avatar?.url—— 任意一环为空，整体返回undefined，不报错 -
obj?.method?.()—— 方法不存在或为null/undefined，调用不执行，返回undefined -
arr?.[index]—— 数组索引安全访问，arr为空也不报错
用 ?? 精准设置默认值
很多人习惯用 || 设默认值，但它会把 0、''、false 全当“假”处理，容易覆盖合法值：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
-
const count = 0 || 10→ 得到10（但 0 是有效数字） -
const name = '' || 'Guest'→ 得到'Guest'（但空字符串可能是用户有意留空）
?? 只在左侧是 null 或 undefined 时才启用右侧默认值：
-
const count = 0 ?? 10→0（保留） -
const name = '' ?? 'Guest'→''（保留） -
const id = user.id ?? 1→ 若user.id是undefined，才用1
组合使用效果更自然
真实场景中，?. 和 ?? 经常配合出现，比如渲染用户头像：
const avatar = user?.profile?.avatar?.url ?? '/default-avatar.png'- 先用
?.安全取值，再用??补默认，整条链干净无副作用 - 比写
(user && user.profile && user.profile.avatar && user.profile.avatar.url) || '/default-avatar.png'清晰太多
注意不能混用的边界情况
这两个操作符虽好，但有明确限制，避免误用：
-
?.不能出现在赋值左侧：obj?.name = 'x'❌ 报错 -
?.()要求函数名本身存在（不能是undefined），否则仍报错；但obj?.fn?.()是安全的 -
??不能跟&&或||直接连用，需加括号：(a ?? b) && c✅，a ?? b && c❌（优先级问题）
