JavaScript中的可选链操作符(?.)与空值合并(??)_javascript ES2020

可选链操作符（?.）和空值合并操作符（??）是ES2020引入的特性，用于安全访问嵌套属性和设置默认值。可选链允许在对象链中某节点为null或undefined时停止访问并返回undefined，避免错误；例如user.profile?.address?.street不会因中间节点缺失而报错，相比冗长的逻辑与判断更简洁。它也适用于方法调用如user.login?.()和数组索引如users[0]?.name。空值合并操作符仅当左侧为null或undefined时取右侧值，与逻辑或（||）不同，后者会将0、''、false等假值也替换掉。例如count ?? 10保留0，而count || 10则返回10。两者常结合使用于API数据处理场景，如apiData.user?.name ?? "匿名用户"，既确保访问安全又提供合理默认值。合理使用能提升代码健壮性和可读性。

JavaScript中的可选链操作符（?.）和空值合并操作符（??）是ES2020引入的两个实用特性，它们能显著提升代码的安全性和简洁性，尤其在处理不确定的对象结构或默认值逻辑时非常有用。

可选链操作符（?.）

可选链允许你安全地访问嵌套对象的深层属性，而无需每次都检查中间节点是否存在。

如果尝试访问一个 null 或 undefined 值的属性，JavaScript会抛出错误。使用 ?. 可以避免这个问题。

假设有一个用户对象，但某些字段可能不存在：

立即学习“Java免费学习笔记（深入）”；

const user = {<br>  profile: {<br>    name: "Alice",<br>    address: { city: "Beijing" }<br>  }<br>};

你想获取用户的街道信息，但 street 字段可能不存在：

const street = user.profile?.address?.street;

此时，street 会是 undefined，而不是报错。如果不用可选链，就得写成：

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

显然，可选链更简洁清晰。

可选链还可用于方法调用和数组索引：

可画AI

Canva可画魔力工作室，一站式AI智能设计工具平台

158

查看详情

• user.login?.() —— 如果 login 方法存在就调用
• users[0]?.name —— 安全访问数组第一个元素的 name 属性

空值合并操作符（??）

这个操作符用于提供“默认值”，但它只在左侧值为 null 或 undefined 时才使用右侧值。

这与逻辑或（||）不同，|| 会在左侧为任何“假值”（如 0, '', false）时使用右侧值。

const count = 0;<br>const display1 = count || 10;  // 结果是 10<br>const display2 = count ?? 10; // 结果是 0

如果你希望 0 是合法值，就应该用 ??，否则会被 || 错误替换。

常见用途是设置默认配置：

const options = {<br>  timeout: null<br>};<br>const timeout = options.timeout ?? 5000; // 使用 5000 作为默认超时时间

结合使用场景

在实际开发中，这两个操作符经常一起使用，尤其是在处理API返回数据时：

const apiData = fetchData();<br>const userName = apiData.user?.name ?? "匿名用户";

这行代码既安全地访问了可能不存在的 name 属性，又在获取不到时提供了合理的默认值。

基本上就这些。合理使用 ?. 和 ?? 能让你的代码更健壮、易读，减少防御性判断的冗余。不复杂但容易忽略细节，掌握后会成为日常编码中的得力工具。

以上就是JavaScript中的可选链操作符(?.)与空值合并(??)_javascript ES2020的详细内容，更多请关注php中文网其它相关文章！