JavaScript中的可选链操作符（Optional Chaining）

描述
可选链操作符（?.）是ES2020引入的新特性，用于简化访问嵌套对象属性时的安全检查。当尝试访问可能为null或undefined的属性时，可选链能够避免抛出TypeError错误，而是直接返回undefined。这在处理深层嵌套的数据结构或API响应时特别有用。

详细讲解

1. 问题背景

   • 传统方式中，访问嵌套属性需要逐层检查是否存在：

     // 如果user或address为null/undefined会报错
     const street = user.address.street;
     
     // 安全写法（冗长）
     const street = user && user.address && user.address.street;
     

   • 深层嵌套时，这种检查会变得冗长且难以维护。

2. 可选链的基本语法

   • 使用?.代替.来访问属性或方法：

     const street = user?.address?.street;
     // 如果user为null/undefined，直接返回undefined，否则继续访问address
     

   • 工作原理：如果?.左侧的值为null或undefined，表达式立即停止计算并返回undefined。

3. 三种使用场景

   • 属性访问：

     // 访问对象属性
     const name = obj?.prop;
     // 等效于: obj == null ? undefined : obj.prop
     

   • 动态属性（方括号语法）：

     const key = "firstName";
     const value = user?.[key];
     // 等效于: user == null ? undefined : user[key]
     

   • 函数或方法调用：

     // 安全调用可能不存在的函数
     const result = obj.method?.();
     // 如果obj.method不存在，返回undefined而非报错
     

4. 注意事项

   • 短路效应：一旦遇到null/undefined，右侧立即停止计算：

     user?.[someVeryExpensiveCalculation()]; 
     // 如果user为null，函数不会执行
     

   • 不能用于赋值：

     obj?.prop = 1;  // 语法错误！
     

   • 对已声明但未初始化的变量无效：

     let user;
     console.log(user?.name); // 正常返回undefined
     
     console.log(undeclaredVar?.name); // 报引用错误（变量未声明）
     

5. 与空值合并操作符（??）结合

   • 可为可选链设置默认值：

     const street = user?.address?.street ?? "未知街道";
     // 当street为null/undefined时显示"未知街道"
     

6. 实际应用示例

   // API响应数据可能缺失的情况
   const apiResponse = {
     data: { users: [{ profile: { name: "Alice" } }] }
   };
   
   // 安全访问深层数据
   const userName = apiResponse.data?.users?.[0]?.profile?.name;
   // 即使中间某一层缺失也不会报错
   
   // 方法调用保护
   const html = document.querySelector("#modal")?.getAttribute("data-type");
   // 如果元素不存在则返回undefined
   

总结
可选链操作符通过简洁的语法解决了深层属性访问的安全问题，减少了冗余的空值检查代码。但需注意它仅针对null和undefined起保护作用，其他假值（如0、""）不会触发短路。在现代JavaScript开发中，它已成为处理不确定数据结构的标准实践。