可选链（Optional Chaining）操作符 ?.

可选链（Optional Chaining）操作符 ?. 是 JavaScript 中的一种语法糖，用来简化访问嵌套对象属性时的代码，避免因访问 null 或 undefined 而导致的错误。它允许你在链式调用中安全地处理不存在的属性或方法，从而减少了手动检查每个对象是否为 null 或 undefined 的需求。

基本语法

object?.property

如果 object 存在且不为 null 或 undefined，则返回 object.property 的值。
如果 object 为 null 或 undefined，则返回 undefined，而不会抛出错误。

示例

1. 访问对象的属性

假设你有一个对象 user，它可能包含 address 和 street 属性，但这些属性并不是每次都会存在：

const user = {
  name: "Alice",
  address: {
    street: "123 Main St",
  },
};

console.log(user?.address?.street); // 输出: "123 Main St"
console.log(user?.address?.city);   // 输出: undefined

user?.address?.street：当 user 和 address 都存在时，返回 street 的值 "123 Main St"。
user?.address?.city：address 没有 city 属性，因此返回 undefined，而不会抛出错误。

2. 访问方法

你还可以用 ?. 来安全调用方法，如果方法不存在，它会返回 undefined，避免抛出错误：

const user = {
  name: "Alice",
  greet: function() {
    return "Hello!";
  }
};

console.log(user?.greet?.());   // 输出: "Hello!"
console.log(user?.sayGoodbye?.());  // 输出: undefined

user?.greet?.()：调用 greet 方法，返回 "Hello!"。
user?.sayGoodbye?.()：sayGoodbye 方法不存在，因此返回 undefined，不会报错。

3. 数组的可选链

?. 也可以用于数组，以确保安全地访问数组元素或方法：

const arr = [1, 2, 3];

console.log(arr?.[1]);  // 输出: 2
console.log(arr?.[5]);  // 输出: undefined

arr?.[1]：访问数组中的第二个元素 2。
arr?.[5]：访问数组中的第六个元素，但该元素不存在，因此返回 undefined。

4. 结合逻辑操作符

可选链常常和其他操作符一起使用，特别是逻辑或 (||) 来提供默认值：

const user = {
  name: "Alice",
  address: {
    street: "123 Main St",
  },
};

const city = user?.address?.city || "Unknown City";
console.log(city);  // 输出: "Unknown City"

user?.address?.city：由于 address 中没有 city 属性，返回 undefined。
undefined || "Unknown City"：由于 undefined 被视为“假”，所以使用默认值 "Unknown City"。

5. 适用场景

嵌套对象：用于访问深层嵌套对象中的属性，避免访问 null 或 undefined 时的错误。
函数调用：用于安全地调用可能未定义的函数。
数组操作：可以安全地访问数组中的元素，避免索引越界。

6. 不支持的情况

可选链操作符不能用于顶级的变量，必须是对象或数组的属性、方法等。

const user = null;
console.log(user?.name);  // 输出: undefined

const name = null?.toUpperCase();  // 这是不合法的

总结

可选链 ?. 提供了一种简洁、安全的方式来访问嵌套对象的属性和方法，在访问深层嵌套时避免了传统的繁琐检查 (if (obj && obj.property)) 或 try-catch 语句。它让你的代码更加简洁、易读，同时避免了不必要的错误。