# JavaScript 可选链（Optional Chaining）与空值合并（Nullish Coalescing）教程

简介

在 JavaScript 的发展过程中，ES2020 引入了两个非常实用的新特性：可选链（Optional Chaining）和空值合并（Nullish Coalescing）。这两个特性极大地简化了代码，提高了开发效率和代码的可读性。本文将详细介绍这两个特性的使用方法和应用场景。

可选链（Optional Chaining）

概述

可选链操作符 ?. 允许你读取位于连接对象链深处的属性，而不必显式地验证链中的每一环是否有效。如果链中的某一环是 null 或 undefined，表达式短路返回 undefined 而不是抛出错误。

语法

obj?.prop
obj?.[method]()

示例

const user = {
  name: 'John',
  details: {
    age: 30
  }
};

// 使用可选链访问 user.details.age
console.log(user.details?.age); // 输出：30

// 如果 details 为 null 或 undefined，不会抛出错误
const userWithoutDetails = {
  name: 'John'
};

console.log(userWithoutDetails.details?.age); // 输出：undefined

空值合并（Nullish Coalescing）

概述

空值合并运算符 ?? 是一个逻辑运算符，当左侧操作数为 null 或 undefined 时，它会返回右侧操作数，否则返回左侧操作数。

语法

let a = null ?? 'default';

示例

let name = null;
let defaultName = 'Guest';

// 使用空值合并为 name 提供默认值
let displayName = name ?? defaultName;

console.log(displayName); // 输出：Guest

应用场景

可选链

1. 访问深层嵌套对象的属性：在不担心中间某一层为 null 或 undefined 的情况下，安全地访问深层嵌套的属性。
2. 函数调用：在不确定对象是否存在方法时，安全地调用该方法。

空值合并

1. 提供默认值：为可能为 null 或 undefined 的变量提供默认值。
2. 简化条件表达式：在需要多个条件判断以确定最终值时，使用空值合并可以简化代码。

结论

可选链和空值合并是现代 JavaScript 开发中不可或缺的两个特性。它们不仅提高了代码的健壮性，还使得代码更加简洁和易于理解。掌握这两个特性，将有助于你编写更加优雅和高效的 JavaScript 代码。

参考

• MDN - Optional Chaining
• MDN - Nullish Coalescing

---