&

^{<input id="oueco"></input>}

?. 和 ??：JS 這兩個＂小可愛＂操作符，少寫80%的 if 判斷！

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

admin

2025年5月28日 14:52 本文熱度 155

作為前端開發者，我們每天都在與各種數據打交道。判空、取值、賦默認值…這些看似簡單的操作，卻經常讓我們的代碼充滿了冗長的 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;