作為前端開發(fā)者，我們每天都在與各種數(shù)據(jù)打交道。判空、取值、賦默認(rèn)值…這些看似簡(jiǎn)單的操作，卻經(jīng)常讓我們的代碼充滿了冗長(zhǎng)的 if-else 判斷。

?? 可選鏈操作符 (?.) - 告別深層嵌套的噩夢(mèng)

傳統(tǒng)寫法的痛點(diǎn)

還記得那些讓人頭疼的深層對(duì)象訪問嗎？

// ?? 傳統(tǒng)寫法：層層判斷
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('數(shù)據(jù)不存在');
}

可選鏈的優(yōu)雅解決方案

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

// 如果任何一層為 null 或 undefined，直接返回 undefined
// 不會(huì)拋出錯(cuò)誤！

?? 空值合并操作符 (??) - 智能默認(rèn)值設(shè)置

與 || 操作符的區(qū)別

這是很多開發(fā)者容易混淆的地方：

?? 寫法對(duì)比

讓我們看看使用這些操作符前后的代碼對(duì)比：

傳統(tǒng)寫法：

現(xiàn)代寫法：

?? 最佳實(shí)踐

1. 適度使用，避免過度鏈?zhǔn)秸{(diào)用

2. 結(jié)合解構(gòu)賦值

const { 
  name = '默認(rèn)名稱', 
  age = 0, 
  email 
} = user?.profile ?? {};

// 相當(dāng)于
const name = user?.profile?.name ?? '默認(rèn)名稱';
const age = user?.profile?.age ?? 0;
const email = user?.profile?.email;

這兩個(gè)"小可愛"操作符的引入，讓 JavaScript 代碼變得更加簡(jiǎn)潔和安全：可選鏈操作符 (?.) 解決了深層對(duì)象訪問的問題，空值合并操作符 (??) 提供了更精確的默認(rèn)值設(shè)置。

閱讀原文：https://mp.weixin.qq.com/s/FBrkz74reWQRuI9szIWxBg