可选链与空值合并

在 TypeScript（以及现代 JavaScript）中，?.和??是处理 “空值” 的神器。它们能帮你写出更简洁、更安全的代码，避免那种满屏都是 if (data && data.user) 的窘境。

可选链运算符 (Optional Chaining): ?.

它的作用： 在访问对象的属性、方法或下标时，如果前面的值为 null 或 undefined，它会立即停止运算并返回 undefined，而不是直接抛出错误。

核心用法：

• 属性访问：obj?.prop
• 方法调用：obj.func?.()
• 数组访问： arr?.[0]

假设我们有一个不确定的用户对象：

// 传统写法（很啰嗦，容易漏写导致报错）
const street = user && user.address && user.address.street;

// 使用 ?.（简洁安全）
const street = user?.address?.street; 
// 如果 user 或 address 是 null/undefined，street 就是 undefined，不会报错。

空值合并运算符 (Nullish Coalescing): ??

它的作用： 当左侧的操作数为 null 或 undefined 时，返回右侧的操作数。否则，返回左侧的操作数。

为什么不用 ||？

很多人习惯用逻辑或 || 来设置默认值，但 || 会对所有“假值”（如 0、""、false）生效。而 ?? 只针对真正的空值（null/undefined）。

const speed = 0;

const result1 = speed || 10; // 结果是 10（因为 0 在 JS 里是假值）
const result2 = speed ?? 10; // 结果是 0 （因为 0 不是 null 或 undefined）

总结

在实际开发中，这两个运算符经常一起使用：先尝试取值，取不到就给默认值。

// 场景：获取用户的昵称，如果没有设置则显示 "游客"
const displayName = apiResponse?.data?.user?.nickname ?? "游客";

符号	名称	关注点	核心逻辑
?.	可选链	链条是否断裂	遇到空值就停，返回 undefined
??	空值合并	是否有实质内容	只有左边是 null/undefined 才用右边