12.1 可选链（?.）与空值合并（??）

12.1 可选链（?.）与空值合并（??）

ES2020 引入了可选链（Optional Chaining）和空值合并（Nullish Coalescing）操作符，极大地简化了对深层嵌套对象的访问和默认值的处理。本节将详细介绍这两个操作符的用法及其应用场景。

12.1.1 可选链（?.）

可选链操作符（?.）用于简化对可能为 null 或 undefined 的对象的属性访问。如果对象为 null 或 undefined，表达式会短路并返回 undefined，而不会抛出错误。

1. 基本用法

const user = {
  profile: {
    name: "Alice",
  },
};

console.log(user.profile?.name); // 输出 "Alice"
console.log(user.address?.street); // 输出 undefined

2. 函数调用
可选链也可以用于函数调用：

const obj = {
  method() {
    return "Hello";
  },
};

console.log(obj.method?.()); // 输出 "Hello"
console.log(obj.nonExistentMethod?.()); // 输出 undefined

3. 数组访问
可选链可以用于数组访问：

const array = [1, 2, 3];

console.log(array?.[0]); // 输出 1
console.log(array?.[10]); // 输出 undefined

12.1.2 空值合并（??）

空值合并操作符（??）用于提供默认值，仅当左侧的值为 null 或 undefined 时，才会返回右侧的值。

1. 基本用法

const value = null;
const defaultValue = "Default";

console.log(value ?? defaultValue); // 输出 "Default"

2. 与 || 的区别
|| 操作符会对所有假值（如 0、""、false）返回默认值，而 ?? 仅对 null 和 undefined 返回默认值：

const value = 0;
const defaultValue = "Default";

console.log(value || defaultValue); // 输出 "Default"
console.log(value ?? defaultValue); // 输出 0

12.1.3 可选链与空值合并的结合

可选链和空值合并可以结合使用，提供更强大的功能。

1. 示例

const user = {
  profile: {
    name: "Alice",
  },
};

const name = user.profile?.name ?? "Unknown";
console.log(name); // 输出 "Alice"

const street = user.address?.street ?? "Unknown";
console.log(street); // 输出 "Unknown"

12.1.4 应用场景

1. 深层嵌套对象的访问
可选链可以简化对深层嵌套对象的访问，避免冗长的 && 检查：

const street = user.address && user.address.street;
// 使用可选链
const street = user.address?.street;

2. 默认值的处理
空值合并可以更精确地处理默认值，避免对假值的误判：

const value = someValue || "Default"; // 可能误判 0 或 ""
const value = someValue ?? "Default"; // 仅对 null 或 undefined 返回默认值

12.1.5 示例代码

示例 1：可选链

const user = {
  profile: {
    name: "Alice",
  },
};

console.log(user.profile?.name); // 输出 "Alice"
console.log(user.address?.street); // 输出 undefined

示例 2：空值合并

const value = null;
const defaultValue = "Default";

console.log(value ?? defaultValue); // 输出 "Default"

示例 3：结合使用

const user = {
  profile: {
    name: "Alice",
  },
};

const name = user.profile?.name ?? "Unknown";
console.log(name); // 输出 "Alice"

const street = user.address?.street ?? "Unknown";
console.log(street); // 输出 "Unknown"

12.1.6 总结

• 可选链（?.）：简化对可能为 null 或 undefined 的对象的属性访问。
• 空值合并（??）：提供默认值，仅对 null 和 undefined 生效。
• 应用场景：深层嵌套对象的访问、默认值的处理。

通过掌握可选链和空值合并操作符，你可以编写更简洁、更安全的代码。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. 可选链操作符的主要作用是什么？
2. 空值合并操作符与 || 操作符的区别是什么？
3. 在什么情况下应该使用可选链和空值合并？