快捷導(dǎo)航

前端小知識之??=?操作符更簡潔的默認(rèn)值處理方式

更新時間：2024年11月29日 11:00:04 作者：前端達(dá)人

這篇文章主要介紹了前端小知識之??=?操作符更簡潔的默認(rèn)值處理方式的相關(guān)資料,??=操作符是JavaScript中用于設(shè)置默認(rèn)值的新操作符,它僅在變量值為null或undefined時才賦值,需要的朋友可以參考下

前言

在日常開發(fā)中，我們經(jīng)常需要為變量設(shè)置默認(rèn)值，比如用戶配置、表單初始值等。JavaScript 在 ECMAScript 2021（ES12）中引入的 ??= 操作符提供了一種更簡潔的方案。作為“邏輯賦值操作符”的一部分，它不僅能讓代碼更清晰，還能避免誤替換掉有效數(shù)據(jù)。

什么是 ??= 操作符？

簡單來說，??= 是一個“智能守護(hù)者”：僅當(dāng)變量的值為 null 或 undefined 時才會賦予它一個默認(rèn)值，而不會影響 0、false、'' 等有效的“假值”。

使用對比

先看看傳統(tǒng)做法和 ??= 的對比：

// 傳統(tǒng)方法：通過 if 語句檢查和賦值
if (user.name === null || user.name === undefined) {
  user.name = '訪客';
}

// 使用 ??= 簡化后的代碼
user.name ??= '訪客';

在這里，user.name ??= '訪客' 只會在 user.name 為 null 或 undefined 時賦值為 '訪客'，否則保留現(xiàn)有值。相比傳統(tǒng)寫法，代碼簡潔了許多，也更清晰。

??= 的典型業(yè)務(wù)應(yīng)用場景

在實際業(yè)務(wù)中，我們經(jīng)常需要處理默認(rèn)值賦值的場景,在社交平臺中，未設(shè)置用戶名的用戶可能需要顯示“訪客”。利用 ??= 可以避免多余判斷，讓代碼簡潔易讀：

function setDefaultUsername(user) {
  user.username ??= '訪客';
}

let userProfile = { username: null };
setDefaultUsername(userProfile);
console.log(userProfile.username); // 輸出: 訪客

userProfile = { username: '小明' };
setDefaultUsername(userProfile);
console.log(userProfile.username); // 輸出: 小明

這里，user.username ??= '訪客' 會檢查 username 是否為 null 或 undefined。如果是，則賦值為“訪客”；否則保留原有值。非常適合在用戶系統(tǒng)中設(shè)置默認(rèn)顯示名。

為什么選擇 ??= ？

在 ??= 出現(xiàn)之前，我們有幾種方法可以設(shè)置默認(rèn)值，但每種方式都有其缺點：

// 使用 if 語句 - 繁瑣且重復(fù)
if (user.name === null || user.name === undefined) {
  user.name = 'Anonymous';
}

// 使用 || 運算符 - 覆蓋太多
user.name = user.name || 'Anonymous';  // 會替換 '', 0, false 等有效值

// 使用三元運算符 - 表達(dá)式冗長且難以閱讀
user.name = user.name === null || user.name === undefined
  ? 'Anonymous'
  : user.name;

// 使用 ??= - 簡潔、精確
user.name ??= 'Anonymous';

??= 的優(yōu)勢在于它的精確性。僅當(dāng)變量真的是“沒有值”時（即 null 或 undefined），它才會賦予默認(rèn)值，因此適用于保留有效的 0、空字符串或 false 等“假值”數(shù)據(jù)：

let score = 0;
score ??= 100;    // 仍然保持 0

let tag = '';
tag ??= 'default'; // 仍然保持空字符串

let active = false;
active ??= true;   // 仍然保持 false

這種精確性能夠有效避免使用更寬泛檢查帶來的潛在問題。在構(gòu)建用戶界面或處理表單數(shù)據(jù)時，我們通常希望保留這些“假值”而不是將它們替換為默認(rèn)值。

||、&& 與 ?? 的適用場景

在 JavaScript 中，我們還可以使用 || 和 && 處理默認(rèn)值，但它們的適用場景不同：

||：當(dāng)變量值是所有“假值”（null、undefined、0、false、'' 等）時都會觸發(fā)，可以快速設(shè)置默認(rèn)值，但可能會覆蓋有效數(shù)據(jù)。
&&：用于在兩個條件都成立的情況下進(jìn)行賦值操作，多用于復(fù)雜條件判斷。
?? 和 ??=：僅在值為 null 或 undefined 時觸發(fā)，因此特別適合保留 0、false、空字符串等有效數(shù)據(jù)。