JavaScript 中 ES6 怎么使用可选链（?.）与空值合并（??）简化逻辑判断-js教程-PHP中文网

可选链（?.）和空值合并（??）是es6+中解决空值困扰的两个核心语法糖：?.用于安全访问深层属性、方法或数组索引，遇null/undefined即返回undefined而不报错；??仅在左侧为null或undefined时返回右侧默认值，避免误覆盖0、''、false等合法假值；二者常组合使用，如user?.profile?.avatar?.url ?? '/default.png'，显著提升代码安全性与可读性。

javascript 中 es6 怎么使用可选链（?.）与空值合并（??）简化逻辑判断

可选链（?.）和空值合并（??）是 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 终端节点、同步与异步等。

下载

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' 清晰太多