在JavaScript中，?.（可选链）、??（空值合并运算符）、??=（空值赋值运算符）是ES2020（也称为ECMAScript 2020）及以后版本中引入的新特性，它们各自在处理可能为null或undefined的变量时提供了更简洁、更安全的操作方式。下面将分别介绍这三个操作符的用法及使用场景，并附上代码演示。
1. 可选链（Optional Chaining）?.
可选链允许你读取位于连接对象链深处的属性的值，而不必显式地验证链中的每一个中间对象是否存在。如果链中的某个对象是null或undefined，表达式短路返回undefined，而不是抛出错误。
使用场景：当你尝试访问深层嵌套对象属性时，但不确定每一层对象是否一定存在。
代码演示：
const user = {
name: "John",
address: {
city: "New York"
}
};
// 使用可选链访问嵌套属性
console.log(user?.address?.city); // 输出: New York
// 假设 address 属性不存在
user.address = null;
console.log(user?.address?.city); // 输出: undefined（不会抛出错误）
2. 空值合并运算符（Nullish Coalescing Operator）??
空值合并运算符??用于在左侧操作数为null或undefined时，返回其右侧操作数，否则返回左侧操作数。这与逻辑或||操作符不同，因为||会在左侧操作数为假值（如0、''、false、null、undefined和NaN）时返回右侧操作数。
使用场景：当你需要为可能为null或undefined的变量提供一个默认值时，但不想在变量为其他假值时（如0或''）也使用默认值。
代码演示：
const firstName = null;
const defaultName = "Guest";
// 使用 ?? 运算符
const displayName = firstName ?? defaultName;
console.log(displayName); // 输出: Guest
// 假设 firstName 是一个空字符串
firstName = "";
const displayNameEmptyString = firstName ?? defaultName;
console.log(displayNameEmptyString); // 输出: ''（因为空字符串是假值但不是null或undefined）
// 使用 || 运算符会得到不同的结果
const displayNameOr = firstName || defaultName;
console.log(displayNameOr); // 输出: Guest（即使 firstName 是空字符串）
3. 空值赋值运算符（Nullish Assignment Operator）??=
空值赋值运算符??=是一种逻辑赋值运算符，它仅在左侧的变量为null或undefined时，才会将其值设置为右侧的表达式。这避免了使用传统的if语句或三元运算符来检查null或undefined并进行赋值。
使用场景：当你想要给变量赋值，但仅当该变量当前为null或undefined时。
代码演示：
let count = null;
// 使用 ??= 运算符
count ??= 10;
console.log(count); // 输出: 10
// 再次尝试赋值，此时 count 不是 null 或 undefined
count ??= 20;
console.log(count); // 输出: 10（不会改变值）
// 对比使用传统的 if 语句
let otherCount = null;
if (otherCount === null || otherCount === undefined) {
otherCount = 10;
}
console.log(otherCount); // 输出: 10
以上三个操作符极大地增强了JavaScript在处理可能为null或undefined的变量时的灵活性和安全性。它们使得代码更加简洁、易读，并减少了在访问深层嵌套属性或处理默认值时需要编写的样板代码量。
