引言

在 JavaScript 开发中，我们经常需要访问嵌套的对象属性。传统的做法是通过多次判断来避免 Cannot read property 'xxx' of undefined 错误，这导致代码冗长且难以维护。可选链操作符 ?. 的引入彻底改变了这一局面。

什么是可选链操作符？

可选链操作符 ?. 允许我们安全地访问嵌套的对象属性，如果中间的某个属性是 null 或 undefined，表达式会短路返回 undefined，而不是抛出错误。

基本语法

obj?.prop          // 访问对象属性
obj?.[expr]        // 通过表达式访问属性
func?.(args)       // 调用可能不存在的函数

传统写法 vs 可选链写法

场景一：访问深层对象属性

传统写法：

// 冗长的判断逻辑
const extraColumns = obj && obj.toString && obj.toString().extraColumns;

// 或者使用三元运算符
const extraColumns = obj 
  ? (obj.toString ? obj.toString().extraColumns : undefined)
  : undefined;

可选链写法：

// 简洁明了
const extraColumns = obj.toString?.().extraColumns;

场景二：函数调用前的检查

传统写法：

let result;
if (obj.toString && typeof obj.toString === 'function') {
  result = obj.toString().extraColumns;
}

可选链写法：

const result = obj.toString?.().extraColumns;

可选链的多种使用场景

1. 安全访问对象属性

const user = {
  profile: {
    name: '张三',
    address: {
      city: '北京'
    }
  }
};

// 安全访问嵌套属性
const city = user?.profile?.address?.city;
console.log(city); // '北京'

// 访问不存在的属性
const country = user?.profile?.address?.country;
console.log(country); // undefined（而不是报错）

2. 数组项的安全访问

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

// 安全访问数组元素
const firstName = users?.[0]?.name;
console.log(firstName); // '张三'

// 访问不存在的数组元素
const invalidUser = users?.[5]?.name;
console.log(invalidUser); // undefined

3. 函数的安全调用

const api = {
  getUser: function() {
    return { name: '王五', age: 28 };
  }
};

// 安全调用函数
const userName = api.getUser?.().name;
console.log(userName); // '王五'

// 调用不存在的方法
const result = api.getData?.().name;
console.log(result); // undefined

4. 结合空值合并运算符

const config = {
  theme: 'dark'
};

// 提供默认值
const fontSize = config?.ui?.fontSize ?? 16;
const language = config?.language ?? 'zh-CN';

console.log(fontSize); // 16
console.log(language); // 'zh-CN'

实际应用案例

案例一：API 响应处理

// 处理不确定结构的 API 响应
function processApiResponse(response) {
  const userName = response?.data?.user?.profile?.name ?? '匿名用户';
  const userEmail = response?.data?.user?.contact?.email;
  const lastLogin = response?.data?.user?.activity?.lastLogin;
  
  return {
    userName,
    userEmail,
    lastLogin: lastLogin ? new Date(lastLogin) : null,
    isValid: !!response?.data?.user
  };
}

// 测试数据
const apiResponse = {
  data: {
    user: {
      profile: {
        name: '张三'
      },
      contact: {
        // email 字段缺失
      }
    }
  }
};

console.log(processApiResponse(apiResponse));
// {
//   userName: '张三',
//   userEmail: undefined,
//   lastLogin: null,
//   isValid: true
// }

案例二：配置对象处理

// 安全的配置合并函数
function mergeConfig(defaultConfig, userConfig) {
  return {
    theme: userConfig?.theme ?? defaultConfig.theme,
    language: userConfig?.language ?? defaultConfig.language,
    ui: {
      fontSize: userConfig?.ui?.fontSize ?? defaultConfig.ui.fontSize,
      showSidebar: userConfig?.ui?.showSidebar ?? defaultConfig.ui.showSidebar
    },
    api: {
      timeout: userConfig?.api?.timeout ?? defaultConfig.api.timeout,
      retryCount: userConfig?.api?.retryCount ?? defaultConfig.api.retryCount
    }
  };
}

const defaultConfig = {
  theme: 'light',
  language: 'en',
  ui: {
    fontSize: 14,
    showSidebar: true
  },
  api: {
    timeout: 5000,
    retryCount: 3
  }
};

const userConfig = {
  theme: 'dark',
  ui: {
    fontSize: 16
    // showSidebar 使用默认值
  }
  // api 配置完全使用默认值
};

const finalConfig = mergeConfig(defaultConfig, userConfig);
console.log(finalConfig);

案例三：DOM 操作安全

// 安全的 DOM 操作函数
function updateUserInterface(userData) {
  // 安全地更新 DOM 元素
  document.getElementById('user-name')?.textContent = userData?.profile?.name ?? '未知用户';
  document.getElementById('user-avatar')?.setAttribute('src', userData?.profile?.avatarUrl);
  document.querySelector('.user-bio')?.classList.toggle('hidden', !userData?.profile?.bio);
  
  // 安全地调用方法
  document.querySelectorAll('.user-widget')?.forEach(widget => {
    widget?.style?.setProperty('--theme-color', userData?.preferences?.themeColor);
  });
}

// 即使 userData 不完整或为 null 也不会报错
updateUserInterface(null);

注意事项和最佳实践

1. 不要过度使用可选链

// ❌ 过度使用
const value = data?.a?.b?.c?.d?.e;

// ✅ 合理使用
const value = data?.importantProperty?.nestedValue;

2. 与空值检查结合使用

// 更好的错误处理
function getUserEmail(user) {
  const email = user?.contact?.email;
  
  if (!email) {
    console.warn('用户邮箱信息缺失');
    return null;
  }
  
  return email;
}

3. 在数组方法中的使用

const users = [
  { name: '张三', profile: { age: 25 } },
  { name: '李四' }, // profile 缺失
  { profile: { age: 30 } } // name 缺失
];

// 安全地处理可能缺失的属性
const validUsers = users
  .filter(user => user?.name && user?.profile?.age)
  .map(user => ({
    name: user.name,
    age: user.profile.age
  }));

console.log(validUsers);
// [{ name: '张三', age: 25 }]

浏览器兼容性和 polyfill

可选链操作符在现代浏览器中得到良好支持，但对于旧版本浏览器，可以使用 Babel 进行转译：

npm install @babel/plugin-proposal-optional-chaining

.babelrc 配置：

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

总结

可选链操作符 ?. 是 JavaScript 中一个极其有用的特性，它：

1. 简化代码：大幅减少空值检查的代码量

2. 提高可读性：使代码意图更加清晰

3. 增强安全性：避免因访问不存在的属性而导致的运行时错误

4. 提高开发效率：减少调试时间，提高代码健壮性

在你的下一个项目中，尝试使用可选链操作符来替代繁琐的空值检查，体验更简洁、更安全的 JavaScript 编程！

// 记住这个模式：obj.toString?.().extraColumns
// 它等价于：obj && obj.toString && obj.toString().extraColumns

可选链操作符让我们的代码更加现代化和健壮，是每个 JavaScript 开发者都应该掌握的重要特性。