?. 和 ??操作符

在 JavaScript 中，?.（可选链操作符）和 ??（空值合并操作符）是两个处理 null 或 undefined 的实用语法，它们的主要区别如下：

---

1. ?. 可选链操作符 (Optional Chaining)

作用：安全地访问嵌套对象的属性或方法，避免因中间值为 null 或 undefined 而报错。
语法：obj?.prop / obj?.[expr] / obj?.method()
规则：

• 如果 ?. 前的值为 null 或 undefined，立即停止计算并返回 undefined。
• 否则继续访问后续属性或方法。

示例：

const user = {
  name: "Alice",
  address: { city: "Paris" }
};

// 安全访问嵌套属性
console.log(user?.address?.city); // "Paris"
console.log(user?.contacts?.phone); // undefined（不会报错）

// 安全调用可能不存在的方法
console.log(user.sayHello?.()); // undefined（不会报错）

---

2. ?? 空值合并操作符 (Nullish Coalescing)

作用：为 null 或 undefined 提供默认值，但会保留其他假值（如 0、""、false）。
语法：leftExpr ?? rightExpr
规则：

• 如果 leftExpr 是 null 或 undefined，返回 rightExpr。
• 否则返回 leftExpr。

示例：

const value1 = null ?? "默认值"; // "默认值"
const value2 = undefined ?? 100; // 100
const value3 = 0 ?? 42; // 0（保留假值 0）
const value4 = "" ?? "Hello"; // ""（保留空字符串）

---

对比 ?? 与 ||（逻辑或）

• || 会对所有假值（0、""、false、NaN、null、undefined）使用默认值。
• ?? 只对 null/undefined 使用默认值，保留其他假值：

  const a = 0 || "默认"; // "默认"（0 是假值）
  const b = 0 ?? "默认"; // 0（保留 0）
  

---

组合使用 ?. 和 ??

常见场景：安全访问属性并提供默认值：

const user = { name: "Bob" };

// 安全访问嵌套属性 + 空值合并
const city = user?.address?.city ?? "未知城市"; 
console.log(city); // "未知城市"

const age = user?.age ?? 18; // 若 age 未定义，默认为 18

---

总结

操作符	名称	作用	示例
?.	可选链 (Optional Chaining)	安全访问属性/方法，避免报错	obj?.prop → 避免 TypeError
??	空值合并 (Nullish Coalescing)	为 null/undefined 提供默认值	null ?? 10 → 10

关键区别：

• ?. 解决访问路径的安全性问题（防崩溃）。
• ?? 解决空值的默认值问题（保留有效假值）。