JavaScript的可选链操作符 ?.

JavaScript的可选链操作符（Optional Chaining Operator）是 ES2020（ES11） 引入的新特性，通过语法 ?. 简化对深层嵌套对象属性、方法或数组元素的访问，避免因中间值为 null 或 undefined 而引发的错误。

核心特性与用法：

1. 对象属性访问
   语法：obj?.prop
   示例：user?.address?.street

   • 若 user 或 address 为 null/undefined，返回 undefined，而非报错。

2. 函数调用
   语法：obj.method?.()
   示例：user.getName?.()

   • 若 getName 不存在，不执行调用，返回 undefined。

3. 数组元素访问
   语法：arr?.[index]
   示例：data?.[0]

   • 若 data 为 null/undefined，返回 undefined。

4. 短路机制
   仅在左侧值为 null/undefined 时停止操作，其他假值（如 0、false）仍会继续访问属性。

优势对比：

• 传统写法：冗长的逻辑与（&&）检查
  config && config.user && config.user.preferences && config.user.preferences.theme

• 可选链：简洁直观
  config?.user?.preferences?.theme

注意事项：

• 不可用于赋值：obj?.prop = 123 会报错。

• 兼容性：需通过 Babel 等工具转译以支持旧环境（如 IE）。

• 与 delete 结合：允许 delete obj?.prop，但需确保操作安全。

适用场景：

• 处理不确定结构的 API 响应数据。

• 简化深层嵌套对象的属性访问。

• 安全调用可能未定义的方法。

示例对比：

// 传统写法
const theme = config 
  && config.user 
  && config.user.preferences 
  && config.user.preferences.theme;

// 可选链写法
const theme = config?.user?.preferences?.theme;

const nextStep = () => {
  // 只有区域绘制数据有值的时候，才能往下走
  if (buildingData.value?.length > 0){
    currentStep.value++
  }else{
    message.warn('请先绘制区域')
  }
}

可选链操作符显著提升了代码的可读性和健壮性，是现代 JavaScript 开发中处理不确定数据结构的实用工具。