可选链操作符（Optional Chaining）与空值合并运算符（Nullish Coalescing）的用法

好的，各位技术探险家们，欢迎来到今天的“代码奇妙夜”！🌃 今晚，我们将一起揭开 JavaScript 中两个“魔法武器”的神秘面纱：可选链操作符（Optional Chaining）和空值合并运算符（Nullish Coalescing）。准备好了吗？让我们开始这段充满乐趣的旅程吧！🚀

第一幕：可选链操作符（?.）——“保险箱”般的访问

想象一下，你正在探索一座古老的城堡 🏰，城堡里有许多房间，房间里可能藏着宝藏 💎，但也可能空无一物。如果你贸然闯入一个不存在的房间，那可就尴尬了，可能会触发“TypeError”这个恼人的陷阱！

这时，可选链操作符（?.）就如同一个经验丰富的向导，它会在你进入下一个房间前，先帮你确认房间是否存在。如果房间不存在，它会优雅地返回 undefined，而不是让你掉入陷阱。

1.1 什么是可选链？

可选链操作符 ?. 允许你安全地访问嵌套对象的属性，即使其中某个属性不存在。它就像一个“短路卫士”，一旦发现链条中的某个环节是 null 或 undefined，就会立即停止执行，返回 undefined。

语法：

object?.property
object?.[expression]
array?.[index]
function?.(arguments)

举个栗子 🌰：

假设我们有一个 user 对象：

const user = {
  name: 'Alice',
  profile: {
    address: {
      city: 'Wonderland'
    }
  }
};

如果我们想访问 user.profile.address.city，传统的方式可能会这样写：

let city;
if (user && user.profile && user.profile.address) {
  city = user.profile.address.city;
} else {
  city = undefined;
}
console.log(city); // Wonderland

这段代码像不像在迷宫里摸索？😵‍💫 如果任何一个环节不存在，我们都必须手动检查。

有了可选链操作符，代码瞬间变得简洁优雅：

const city = user?.profile?.address?.city;
console.log(city); // Wonderland

简直是魔法！✨ 如果 user、profile 或 address 不存在，city 将会是 undefined，而不会抛出错误。

1.2 可选链的多种用法

可选链操作符不仅可以用于访问对象属性，还可以用于：

函数调用：

const result = someFunction?.(arg1, arg2);

如果 someFunction 存在，则调用它；否则，返回 undefined。

数组访问：

const element = myArray?.[index];

如果 myArray 存在且 index 在数组范围内，则返回对应元素；否则，返回 undefined。

1.3 可选链的注意事项

只对 null 和 undefined 生效： 可选链操作符只会在遇到 null 或 undefined 时停止执行。对于其他“假值”（例如 0、''、false），它会继续执行。
不能用于赋值操作的左侧： user?.name = 'Bob' 是无效的，因为你不能给一个可能不存在的属性赋值。
与 delete 操作符结合使用： 可以安全地删除可能不存在的属性：

delete user?.profile?.address?.city;

1.4 可选链的优势总结

优点	描述
代码简洁	避免了大量的 `if` 语句和 `&&` 运算符，使代码更易读。
避免错误	防止访问不存在的属性时抛出 `TypeError` 错误，提高了代码的健壮性。
安全访问嵌套属性	可以安全地访问多层嵌套的属性，无需担心中间环节是否存在。
提高开发效率	减少了调试和错误处理的时间，提高了开发效率。

第二幕：空值合并运算符（??）——“备胎”般的选择

现在，我们来到了另一个场景：你正在寻找一个默认值，以防某个变量是 null 或 undefined。你希望有一个“备胎”，当变量“抛锚”时，可以立即顶上。这时，空值合并运算符（??）就派上用场了！

2.1 什么是空值合并运算符？

空值合并运算符 ?? 提供了一种简洁的方式来为变量设置默认值，只有当变量是 null 或 undefined 时，才会使用默认值。

语法：

variable ?? defaultValue

举个栗子 🌰：

假设我们想获取用户的昵称，但如果用户没有设置昵称，则使用默认昵称 "Guest"：

const user = {
  nickname: null
};

const nickname = user.nickname ?? 'Guest';
console.log(nickname); // Guest

如果 user.nickname 是 null 或 undefined，nickname 将会是 "Guest"。

2.2 `??` 与 `||` 的区别

你可能会问：?? 和 || 运算符有什么区别？它们都可以用来设置默认值，但它们的行为却截然不同。

|| 运算符被称为“逻辑或”运算符，它会将左侧的操作数转换为布尔值，如果为 false，则返回右侧的操作数。这意味着，如果左侧的操作数是 0、''、false，|| 也会返回右侧的操作数。

而 ?? 运算符只会在左侧的操作数是 null 或 undefined 时，才返回右侧的操作数。它不会进行布尔值转换，因此可以区分真正缺失的值和“假值”。

示例：

const value1 = 0 || 'Default';
console.log(value1); // Default

const value2 = 0 ?? 'Default';
console.log(value2); // 0

在这个例子中，value1 是 "Default"，因为 0 被转换为 false。而 value2 是 0，因为 ?? 只关心 null 和 undefined。

2.3 空值合并运算符的注意事项

不能与 && 和 || 混合使用： 为了避免歧义，?? 运算符不能直接与 && 和 || 运算符混合使用。如果需要混合使用，必须使用括号明确优先级：

// 错误：
// const result = a ?? b || c;

// 正确：
const result1 = (a ?? b) || c;
const result2 = a ?? (b || c);

与可选链操作符结合使用： 可以将 ?? 和 ?. 结合使用，为可能不存在的属性设置默认值：

const city = user?.profile?.address?.city ?? 'Unknown';

如果 user.profile.address.city 不存在，city 将会是 "Unknown"。

2.4 空值合并运算符的优势总结

优点	描述
简洁明了	提供了简洁的方式来设置默认值，避免了冗长的 `if` 语句。
区分真假	只对 `null` 和 `undefined` 生效，可以区分真正缺失的值和“假值”。
提高代码可读性	使代码更易读，更容易理解默认值的逻辑。
避免意外行为	避免了 `\|\|` 运算符可能导致的意外行为，例如将 `0` 或 `''` 视为缺失值。

第三幕：实战演练——打造更健壮的代码

理论学习完毕，是时候进行实战演练了！让我们通过几个实际的例子，来展示如何使用可选链操作符和空值合并运算符来打造更健壮的代码。

场景 1：处理 API 响应

假设我们正在从 API 获取用户信息，API 可能会返回不完整的数据：

async function fetchUser() {
  try {
    const response = await fetch('/api/user');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Failed to fetch user:', error);
    return null;
  }
}

async function displayUserCity() {
  const user = await fetchUser();
  const city = user?.profile?.address?.city ?? 'Unknown';
  console.log(`User city: ${city}`);
}

displayUserCity();

在这个例子中，我们使用了可选链操作符来安全地访问嵌套属性，并使用空值合并运算符来为城市设置默认值 "Unknown"。即使 API 返回的数据不完整，我们的代码也不会崩溃，而是会优雅地显示 "Unknown"。

场景 2：处理表单数据

假设我们正在处理一个表单，用户可以选择填写一些可选字段：

function handleSubmit(event) {
  event.preventDefault();

  const formData = new FormData(event.target);
  const name = formData.get('name') || 'Anonymous';
  const email = formData.get('email') ?? null;
  const phone = formData.get('phone') ?? 'Not provided';

  console.log(`Name: ${name}`);
  console.log(`Email: ${email}`);
  console.log(`Phone: ${phone}`);
}

在这个例子中，我们使用了 || 运算符来为 name 设置默认值 "Anonymous"，因为我们希望即使用户没有填写姓名，也要显示一个默认姓名。我们使用了 ?? 运算符来为 email 和 phone 设置默认值，因为我们希望区分用户没有填写和填写了空字符串的情况。

场景 3：处理配置对象

假设我们正在使用一个配置对象来控制应用程序的行为：

const config = {
  apiEndpoint: 'https://api.example.com',
  timeout: 5000,
  features: {
    debugMode: true,
    analyticsEnabled: false
  }
};

const apiEndpoint = config.apiEndpoint;
const timeout = config.timeout ?? 10000; // 默认超时时间为 10 秒
const debugMode = config.features?.debugMode ?? false; // 默认关闭 debug 模式

console.log(`API Endpoint: ${apiEndpoint}`);
console.log(`Timeout: ${timeout}`);
console.log(`Debug Mode: ${debugMode}`);

在这个例子中，我们使用了 ?? 运算符来为 timeout 设置默认值 10000，并使用可选链操作符和 ?? 运算符来为 debugMode 设置默认值 false。这样，即使配置对象不完整，我们的应用程序也能正常运行。

第四幕：总结与展望——更上一层楼

恭喜各位，我们已经完成了今天的“代码奇妙夜”之旅！🎉 通过学习可选链操作符和空值合并运算符，我们掌握了两个强大的工具，可以帮助我们编写更简洁、更健壮的代码。

总结：

可选链操作符（?.）：用于安全地访问嵌套对象的属性，避免 TypeError 错误。
空值合并运算符（??）：用于为变量设置默认值，只在变量是 null 或 undefined 时生效。

展望：

随着 JavaScript 的不断发展，新的语法特性和工具不断涌现。作为技术探险家，我们需要保持学习的热情，不断探索新的知识，才能在代码的世界里自由驰骋！🐎

希望今天的分享能对你有所帮助。下次再见！👋