聊聊 JS 中的可选链 ?.

前言

JS 的可选链操作符（?.）是 ES2020 引入的一个语法糖，它的出现主要是为了解决在访问深层嵌套对象属性时可能遇到的运行时错误问题。

可选链出现的背景

在可选链之前，当我们需要访问一个可能不存在的嵌套属性时，经常会遇到这样的错误：

const user = {
  profile: null
};

// 这会抛出 TypeError: Cannot read property 'name' of null
console.log(user.profile.name);

为了避免这种错误，开发者不得不写出冗长的防御性代码：

if (user && user.profile && user.profile.name) {
  console.log(user.profile.name);
}

// 或者
console.log(user && user.profile && user.profile.name);

这种写法不仅冗长，而且容易出错，特别是在处理API返回的复杂数据结构时。

可选链解决的问题

可选链操作符主要解决了三个问题：

1. 简化了对象属性的安全访问：不再需要手动检查每一层属性是否存在
2. 提高了代码的可读性：减少了大量的条件判断代码
3. 降低了运行时错误的风险：当链路中某个环节为 null 或 undefined 时，整个表达式会短路返回 undefined

好的使用场景

1. API数据处理

// 处理不确定结构的API响应
const response = await fetch('/api/user');
const data = await response.json();

// 好的使用方式
const userName = data?.user?.profile?.name;
const avatar = data?.user?.profile?.avatar?.url;

2. 配置对象访问

// 访问可能缺失的配置项
const config = {
  database: {
    host: 'localhost'
    // port 可能不存在
  }
};

const dbPort = config?.database?.port || 3306;

3. 动态属性访问

// 根据用户权限动态访问不同的属性
const userPermissions = user?.permissions?.[userRole]?.actions;

4. 方法调用

// 安全地调用可能不存在的方法
api?.onSuccess?.();
callback?.();

不当的使用场景

1. 过度使用在已知结构上

// 不好的做法：对于已知的必需属性使用可选链
const user = {
  id: 1,
  name: 'John'
};

// 这里name是必需的，不应该用可选链
const name = user?.name; // 多余的使用

2. 在函数参数上滥用

// 不好的做法：函数参数应该在函数开始就验证
function processUser(user) {
  // 这样做会掩盖参数验证问题
  const name = user?.name;
  const email = user?.email;

  // 更好的做法是明确验证参数
  if (!user) {
    throw new Error('User is required');
  }
}

3. 在数组操作中的误用

// 不好的做法：数组方法本身会处理空数组
const items = [];
items?.forEach?.(item => console.log(item)); // 多余

// 正确做法
items.forEach(item => console.log(item)); // 空数组不会执行回调

4. 隐藏设计问题

// 不好的做法：用可选链掩盖数据结构设计问题
const result = deeply?.nested?.object?.that?.should?.not?.exist;

// 这种深层嵌套本身就是设计问题的信号

5. 创建"空壳对象"的陷阱

这是可选链最容易被滥用的场景之一。当一个对象的多个属性都依赖于某个可能为空的源数据时，盲目使用可选链会创建出一个属性全为 undefined 的"空壳对象"。

不好的做法：创建无意义的空壳对象

// API返回的数据可能为空
const apiResponse = null; // 或者 undefined

// 不好的做法：盲目使用可选链
const userProfile = {
  name: apiResponse?.user?.name,
  email: apiResponse?.user?.email,
  avatar: apiResponse?.user?.avatar,
  age: apiResponse?.user?.age,
  location: apiResponse?.user?.location
};

console.log(userProfile);
// 输出: { name: undefined, email: undefined, avatar: undefined, age: undefined, location: undefined }

// 这个对象毫无意义，但它确实存在，可能会误导后续的逻辑判断
if (userProfile) { // 这里会通过，因为对象存在
  // 但实际上所有属性都是undefined
  renderUserCard(userProfile); // 会渲染一个空的用户卡片
}

正确的做法：前置判断，直接返回null

// 正确的做法：先判断源数据是否存在
const userProfile = apiResponse?.user ? {
  name: apiResponse.user.name,
  email: apiResponse.user.email,
  avatar: apiResponse.user.avatar,
  age: apiResponse.user.age,
  location: apiResponse.user.location
} : null;

console.log(userProfile); // 输出: null

// 这样后续的判断就很清晰
if (userProfile) {
  renderUserCard(userProfile); // 只有在有有效数据时才渲染
} else {
  showEmptyState(); // 显示空状态
}

在组件中的应用

// 组件中的不当使用
function UserCard({ userData }) {
  // 不好的做法：总是创建用户对象
  const user = {
    name: userData?.name,
    email: userData?.email,
    avatar: userData?.avatar
  };

  // 即使userData为null，user对象仍然存在
  // 组件会渲染出空的用户卡片
  return (
    <div className="user-card">
    <img src={user.avatar} alt={user.name} />
  <h3>{user.name}</h3>
  <p>{user.email}</p>
  </div>
);
}

// 正确的做法：前置判断
function UserCard({ userData }) {
  // 如果没有用户数据，直接返回空状态
  if (!userData) {
    return <div className="empty-state">暂无用户信息</div>;
  }

  // 有数据时才构建完整的用户对象
  const user = {
    name: userData.name,
    email: userData.email,
    avatar: userData.avatar || '/default-avatar.png'
  };

  return (
    <div className="user-card">
    <img src={user.avatar} alt={user.name} />
  <h3>{user.name}</h3>
  <p>{user.email}</p>
  </div>
);
}

使用建议

可选链是一个强大的工具，但不应该成为解决所有问题的万能钥匙。在使用时需要考虑：

• 明确性原则：如果某个属性是必需的，就不要使用可选链，让错误暴露出来
• 适度原则：不要为了"安全"而无脑添加可选链
• 语义原则：可选链应该反映数据的真实不确定性，而不是掩盖代码逻辑问题

合理使用可选链可以让代码更加健壮和清晰，但滥用则会让代码失去明确性，甚至掩盖潜在的设计问题。关键是要理解什么时候数据真的是"可选的"，什么时候应该明确处理错误情况。