JavaScript中的可选链（Optional Chaining）与空值合并（Nullish Coalescing）如何协同工作？

可选链（?.）避免访问null/undefined时出错，空值合并（??）在值为null/undefined时提供默认值。例如：const user = { profile: {} }; const language = user.profile?.preferences?.language ?? 'en'; 先用可选链安全读取嵌套属性，再用空值合并设置默认值，避免错误并精准处理缺省情况，使代码更简洁安全。

可选链（Optional Chaining）和空值合并（Nullish Coalescing）是 JavaScript 中两个互补的特性，它们常一起使用来安全地访问嵌套属性并提供合理的默认值。

可选链：避免访问 null 或 undefined 时出错

可选链操作符 (?.) 允许你读取深层嵌套对象属性时，无需每次都检查中间节点是否存在。如果某个环节是 null 或 undefined，表达式会短路返回 undefined，而不是抛出错误。

例如：

Clipfly

一站式AI视频生成和编辑平台，提供多种AI视频处理、AI图像处理工具。

98

查看详情

const user = {};
// 不会报错，result 为 undefined
const result = user.profile?.address?.street;

空值合并：为 null/undefined 提供默认值

空值合并操作符 (??) 只有在左侧值为 null 或 undefined 时，才返回右侧的默认值。它不会把 0、false、空字符串等“假值”当成需要替换的情况。

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

例如：

const count = 0;
const display = count ?? 10; // display 是 0，不是 10

协同使用：安全读取 + 合理兜底

当你从一个可能不完整的对象结构中读取数据时，先用可选链避免错误，再用空值合并设置默认值，是最常见的组合模式。

示例场景：获取用户的首选语言，默认为 'en'：

const user = { profile: {} };
const language = user.profile?.preferences?.language ?? 'en';
console.log(language); // 输出 'en'

这里：

• 可选链确保即使 preferences 或 language 不存在也不会崩溃
• 空值合并判断最终结果是否为空，决定是否使用默认值

如果写成 user.profile.preferences.language || 'en'，当 language 是空字符串时也会被替换，而 ?? 更精确地只处理 null/undefined。

基本上就这些。这两个操作符配合使用，让处理不确定结构的数据变得更简洁、更安全。

以上就是JavaScript中的可选链（Optional Chaining）与空值合并（Nullish Coalescing）如何协同工作？的详细内容，更多请关注php中文网其它相关文章！