作为前端开发者，我们每天都在与各种数据打交道。判空、取值、赋默认值…这些看似简单的操作，却经常让我们的代码充满了冗长的 if-else 判断。

🎯 可选链操作符 (?.) - 告别深层嵌套的噩梦

传统写法的痛点

还记得那些让人头疼的深层对象访问吗？

// 😩 传统写法：层层判断
if (user && user.profile && user.profile.address && user.profile.address.city) {
 console.log(user.profile.address.city);
}

// 😩 或者使用 try-catch
try {
 const city = user.profile.address.city;
 console.log(city);
} catch (error) {
 console.log('数据不存在');
}

可选链的优雅解决方案

// 😍 使用可选链：一行搞定！
console.log(user?.profile?.address?.city);

// 如果任何一层为 null 或 undefined，直接返回 undefined
// 不会抛出错误！

🎯 空值合并操作符 (??) - 智能默认值设置

与 || 操作符的区别

这是很多开发者容易混淆的地方：

📊 写法对比

让我们看看使用这些操作符前后的代码对比：

传统写法：

现代写法：

🎨 最佳实践

1. 适度使用，避免过度链式调用

2. 结合解构赋值

const { 
  name = '默认名称', 
  age = 0, 
  email 
} = user?.profile ?? {};

// 相当于
const name = user?.profile?.name ?? '默认名称';
const age = user?.profile?.age ?? 0;
const email = user?.profile?.email;

这两个"小可爱"操作符的引入，让 JavaScript 代码变得更加简洁和安全：可选链操作符 (?.) 解决了深层对象访问的问题，空值合并操作符 (??) 提供了更精确的默认值设置。

阅读原文：https://mp.weixin.qq.com/s/FBrkz74reWQRuI9szIWxBg