前言

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

什么是 ??= 操作符？

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

使用對(duì)比

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

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

// 使用 ??= 簡(jiǎn)化后的代碼
user.name ??= '訪客';

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

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

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

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 ??= '訪客' 會(huì)檢查 username 是否為 null 或 undefined。如果是，則賦值為“訪客”；否則保留原有值。非常適合在用戶(hù)系統(tǒng)中設(shè)置默認(rèn)顯示名。

為什么選擇 ??= ？

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

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

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

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

// 使用 ??= - 簡(jiǎn)潔、精確
user.name ??= 'Anonymous';

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

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

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

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

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

||、&& 與 ?? 的適用場(chǎng)景

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

• ||：當(dāng)變量值是所有“假值”（null、undefined、0、false、'' 等）時(shí)都會(huì)觸發(fā)，可以快速設(shè)置默認(rèn)值，但可能會(huì)覆蓋有效數(shù)據(jù)。

• &&：用于在兩個(gè)條件都成立的情況下進(jìn)行賦值操作，多用于復(fù)雜條件判斷。

• ?? 和 ??=：僅在值為 null 或 undefined 時(shí)觸發(fā)，因此特別適合保留 0、false、空字符串等有效數(shù)據(jù)。

在需要確保變量只在“無(wú)值”情況下被覆蓋時(shí)，??= 操作符能提供最佳的精確控制。

總結(jié)

??= 操作符讓 JavaScript 的默認(rèn)值處理更加簡(jiǎn)潔和精確。無(wú)論是設(shè)置默認(rèn)用戶(hù)名、初始化配置項(xiàng)，還是處理表單初始值，??= 都能幫助我們?cè)诖_保數(shù)據(jù)完整的前提下，讓代碼更具可讀性和實(shí)用性。

希望這個(gè)小技巧能讓你的開(kāi)發(fā)更高效！

到此這篇關(guān)于前端小知識(shí)之??= 操作符更簡(jiǎn)潔的默認(rèn)值處理方式的文章就介紹到這了,更多相關(guān)前端??= 操作符默認(rèn)值處理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論