JavaScript Optional Chaining

什么是可选链操作符？

可选链操作符（Optional Chaining Operator）是 JavaScript 中的一个现代特性，用 ?. 表示。它允许开发者在访问对象的属性时，如果引用的对象是 null 或 undefined，表达式会短路并返回 undefined，而不是抛出错误。

这个特性解决了在 JavaScript 开发中常见的一个痛点：深层嵌套对象属性的安全访问。

备注

可选链接（Optional Chaining）是 ECMAScript 2020 (ES11) 中引入的特性，现代浏览器和 Node.js 的较新版本已支持此功能。

传统方式与可选链对比

传统方式访问嵌套属性

在没有可选链操作符之前，安全地访问深层嵌套属性通常是这样的：

javascript

let user = {
  profile: {
    name: "Alex",
    address: {
      city: "Shanghai"
    }
  }
};

// 传统方式安全访问
let city;
if (user && user.profile && user.profile.address) {
  city = user.profile.address.city;
}

console.log(city); // "Shanghai"

当对象层次结构复杂时，这种代码会变得冗长且难以维护。

使用可选链

现在，使用可选链操作符，同样的操作可以这样写：

javascript

let user = {
  profile: {
    name: "Alex",
    address: {
      city: "Shanghai"
    }
  }
};

let city = user?.profile?.address?.city;
console.log(city); // "Shanghai"

// 当某个属性不存在时
let country = user?.profile?.address?.country;
console.log(country); // undefined，不会抛出错误

可选链的工作原理

可选链操作符的工作方式是：

1. 如果 ?. 前面的值是 null 或 undefined，表达式会立即返回 undefined
2. 否则，正常访问 ?. 后面的属性

这种"短路"行为可以有效防止由于访问不存在的属性而导致的错误。

可选链的应用场景

1. 访问对象的可能不存在的属性

javascript

function displayUserLocation(user) {
  const city = user?.address?.city ?? "未知城市";
  console.log(`用户所在城市: ${city}`);
}

// 使用正常对象
displayUserLocation({
  name: "李明",
  address: { city: "北京" }
}); // 输出: 用户所在城市: 北京

// 对象缺少属性
displayUserLocation({
  name: "张红"
}); // 输出: 用户所在城市: 未知城市

// 参数为 null
displayUserLocation(null); // 输出: 用户所在城市: 未知城市

2. 调用可能不存在的方法

可选链不仅可以用于属性访问，还可以用于方法调用：

javascript

const user = {
  profile: {
    sayHello() {
      return "你好！";
    }
  }
};

// 安全调用方法
console.log(user.profile.sayHello?.()); // 输出: "你好！"
console.log(user.profile.sayGoodbye?.()); // 输出: undefined (方法不存在，但不会报错)

3. 访问数组元素

可选链也可以与方括号语法一起使用来安全地访问数组元素：

javascript

const users = [
  { name: "张三", age: 25 },
  { name: "李四", age: 30 }
];

// 安全访问数组元素
console.log(users?.[0]?.name); // "张三"
console.log(users?.[5]?.name); // undefined (索引 5 不存在)

// 数组不存在的情况
const admins = null;
console.log(admins?.[0]?.name); // undefined (admins 为 null)

实际案例：处理 API 响应数据

在前端开发中，我们经常需要处理来自 API 的 JSON 数据。这些数据结构可能很复杂，而且有时某些字段可能不存在。

假设我们从 API 获取了一个用户数据：

javascript

// 模拟 API 响应
const apiResponse = {
  status: "success",
  data: {
    user: {
      id: 123,
      profile: {
        firstName: "李",
        lastName: "明",
        contact: {
          email: "liming@example.com"
          // 电话号码可能不存在
        }
      },
      // 订单历史可能为空
      orders: [
        { id: "ORD-001", total: 100 },
        { id: "ORD-002", total: 75 }
      ]
    }
  }
};

// 使用可选链安全访问数据
function displayUserInfo(response) {
  // 获取用户的名字和联系信息
  const firstName = response?.data?.user?.profile?.firstName ?? "未知";
  const lastName = response?.data?.user?.profile?.lastName ?? "";
  const fullName = `${firstName} ${lastName}`.trim() || "未知用户";
  
  const email = response?.data?.user?.profile?.contact?.email ?? "无电子邮件";
  const phone = response?.data?.user?.profile?.contact?.phone ?? "无电话号码";
  
  // 获取用户的最新订单
  const latestOrder = response?.data?.user?.orders?.[0];
  const orderInfo = latestOrder
    ? `最新订单: ${latestOrder.id}, 金额: ¥${latestOrder.total}`
    : "无订单历史";
  
  return {
    fullName,
    contactInfo: { email, phone },
    orderInfo
  };
}

// 使用函数
const userInfo = displayUserInfo(apiResponse);
console.log(userInfo);
/* 输出:
{
  fullName: "李 明",
  contactInfo: {
    email: "liming@example.com",
    phone: "无电话号码"
  },
  orderInfo: "最新订单: ORD-001, 金额: ¥100"
}
*/

// 即使 API 响应格式不完整，代码也能正常工作
const incompleteResponse = {
  status: "success",
  data: {
    // user 字段缺失
  }
};

const incompleteUserInfo = displayUserInfo(incompleteResponse);
console.log(incompleteUserInfo);
/* 输出:
{
  fullName: "未知用户",
  contactInfo: {
    email: "无电子邮件",
    phone: "无电话号码"
  },
  orderInfo: "无订单历史"
}
*/

可选链的注意事项

尽管可选链非常有用，但使用时也需要注意以下几点：

1. 过度使用可能掩盖问题：可选链可以避免错误，但过度使用可能会掩盖代码中的逻辑问题。
2. 性能考虑：在性能关键的循环中，如果你确定某个属性总是存在，直接访问可能会更快。
3. 可选链与空值合并运算符：可选链 (?.) 经常与空值合并运算符 (??) 一起使用，以提供默认值。
4. 不适用于赋值操作：可选链左侧的表达式无法作为赋值的目标。

javascript

// 这是无效的代码
// user?.profile?.address = { city: "北京" }; // 错误!

// 正确的做法
if (user?.profile) {
  user.profile.address = { city: "北京" };
}

浏览器兼容性

可选链是 ES2020 的一个特性，大多数现代浏览器都支持它。但如果需要支持较旧的浏览器，应当使用 Babel 等工具进行代码转译。

总结

可选链操作符 (?.) 是一个强大的 JavaScript 特性，它可以：

• 简化对象属性的安全访问
• 避免因访问 null 或 undefined 的属性而导致的错误
• 使代码更简洁、更易读
• 特别适用于处理复杂的嵌套对象或 API 数据

掌握可选链操作符可以显著提高你的代码质量和开发效率，尤其是在处理不确定的数据结构时。

练习

为了巩固你的理解，尝试完成以下练习：

1. 给定一个复杂的用户对象，使用可选链操作符安全地提取用户的公司地址邮编。
2. 重构一个使用多层 if 条件检查的代码，改用可选链。
3. 结合空值合并运算符 (??)，从一个可能缺少某些字段的 API 响应中提取数据并提供默认值。

更多资源

• MDN Web Docs - 可选链操作符
• ECMAScript 提案
• 学习相关概念：空值合并运算符 (??)、逻辑空赋值 (??=)

提示

可选链操作符与类型检查系统（如 TypeScript）结合使用效果更佳，因为后者可以在编译时捕获潜在的类型错误，而可选链则在运行时提供额外的安全保障。