作为前端开发者，我们每天都在与各种数据打交道。判空、取值、赋默认值…这些看似简单的操作，却经常让我们的代码充满了冗长的 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 代码变得更加简洁和安全： ** 可选链操作符 (?.) ** 解决了深层对象访问的问题， **
空值合并操作符 (??) ** 提供了更精确的默认值设置。