可选链 “?.“

可选链操作符（?.）是 JavaScript 中的一种语法，用于简化对深层嵌套对象属性的访问。它允许你在访问对象属性时，如果某个中间属性是 null 或 undefined，则不会引发错误，而是返回 undefined。

可选链操作符使得在访问嵌套属性时，可以避免多层检查 null 或 undefined。它的语法如下：

• obj?.prop：如果 obj 是 null 或 undefined，返回 undefined，否则返回 obj.prop。
• obj?.[expr]：如果 obj 是 null 或 undefined，返回 undefined，否则返回 obj[expr]。
• obj?.method()：如果 obj 是 null 或 undefined，返回 undefined，否则调用 obj.method()。

应用场景

1. 访问深层嵌套属性：在处理从外部 API 或数据库中获取的数据时，这些数据结构可能非常复杂。可选链操作符可以防止由于访问深层嵌套的 null 或 undefined 导致的错误。

2. 调用方法或访问属性：在操作对象的方法时，如果对象或对象中的某个属性可能是 null 或 undefined，可选链可以避免抛出异常。

3. 处理不确定的对象结构：在一些动态创建或不确定的对象结构中，使用可选链可以简化代码并提高安全性。

示例代码

示例 1: 访问深层嵌套属性

const user = {
  profile: {
    address: {
      city: 'San Francisco'
    }
  }
};

const city = user.profile?.address?.city; // 'San Francisco'
const country = user.profile?.address?.country; // undefined, does not throw an error

在这个例子中，如果 profile 或 address 是 null 或 undefined，city 将会是 undefined，不会抛出错误。

示例 2: 访问数组中的元素

const data = {
  items: [
    { name: 'Item 1' },
    { name: 'Item 2' }
  ]
};

const firstItemName = data.items?.[0]?.name; // 'Item 1'
const thirdItemName = data.items?.[2]?.name; // undefined

在这个例子中，如果 items 数组长度不够，或者索引超出范围，不会抛出错误，thirdItemName 将会是 undefined。

示例 3: 调用方法

const obj = {
  doSomething: () => 'done'
};

const result = obj.doSomething?.(); // 'done'
const missingResult = obj.missingMethod?.(); // undefined

在这个例子中，如果 doSomething 方法不存在，missingResult 将会是 undefined，不会引发错误。

总结

可选链操作符（?.）在 JavaScript 中提供了一种简洁而安全的方式来处理嵌套对象属性和方法调用，减少了在访问这些属性时所需的条件检查，使代码更加简洁和易于维护。