在 JavaScript 開(kāi)發(fā)中，很多小伙伴都會(huì)遇到一個(gè)場(chǎng)景，就是要給變量設(shè)置一個(gè)默認(rèn)值，比如當(dāng)變量沒(méi)有有效值時(shí)，使用一個(gè)備用值。這個(gè)時(shí)候，可能有兩個(gè)操作符會(huì)讓你感到困惑：??（空值合并運(yùn)算符）和 ||（邏輯或運(yùn)算符）。一開(kāi)始看，它們似乎都能達(dá)到相同的效果，但其實(shí)它們背后的邏輯完全不同，適用的場(chǎng)景也不一樣。今天我們就來(lái)聊聊這兩者的區(qū)別，幫你快速上手，避免掉坑！

"||" 是怎么工作的？—— 就像找備胎一樣！

|| 就好像是在說(shuō)：“如果這個(gè)不行，就換另一個(gè)。”它的具體作用是檢查左邊的值（第一個(gè)計(jì)劃），如果左邊這個(gè)值是 “假”（也就是不靠譜、不能用的意思），它就會(huì)去看右邊的值（第二個(gè)計(jì)劃），并返回右邊的值。

舉個(gè)例子來(lái)理解一下：

let result = value1 || value2;

這段代碼就是在說(shuō)：“如果 value1 能用，就用 value1；如果 value1 不行，那就用 value2 吧！”那問(wèn)題來(lái)了，什么情況下 value1 會(huì)不行呢？

什么是 "假值"？

在 JavaScript 里，有一些特殊的值會(huì)被認(rèn)為是“假”的，像這些：

• false（假）
• 0（零）
• ""（空字符串）
• null（表示空）
• undefined（未定義）
• NaN（非數(shù)字）

這些值都被認(rèn)為是不能用的“假值”。如果你遇到這些值，|| 操作符就會(huì)幫你返回后面的備用計(jì)劃。

舉個(gè)栗子??：

let username = "" || "游客"; // 返回 "游客"
let score = 0 || 10;          // 返回 10

在上面的例子里，""（空字符串）和 0 都是“假值”，所以 JavaScript 會(huì)忽略它們，直接選擇后面的“游客”和 10 作為返回值。

那什么時(shí)候用 "||" 呢？

|| 的最佳使用場(chǎng)景就是當(dāng)你不確定一個(gè)值是否靠譜的時(shí)候，你可以為它準(zhǔn)備一個(gè)備用值。就像生活中你遇到的兩手準(zhǔn)備：如果第一種方案失敗了，立刻執(zhí)行第二種。

比如你想讓用戶輸入他們的名字，但如果用戶沒(méi)有輸入名字，你就讓系統(tǒng)自動(dòng)叫他們“游客”。用 || 來(lái)實(shí)現(xiàn)這個(gè)需求簡(jiǎn)直再好不過(guò)了：

function greetUser(name) {
  let username = name || "游客";
  console.log(`你好, ${username}!`);
}
 
greetUser("");  // 輸出: 你好, 游客!
greetUser("Alice");  // 輸出: 你好, Alice!

在這個(gè)例子里，如果用戶沒(méi)有輸入名字（比如空字符串 ""），我們就用 || 返回一個(gè)默認(rèn)值“游客”。但如果用戶輸入了名字（比如 “Alice”），我們就用這個(gè)名字打招呼。

JavaScript 中的"??"操作符：只關(guān)心空值，別搞混了！

JavaScript 里的??（空值合并運(yùn)算符）看起來(lái)和我們之前聊過(guò)的||有點(diǎn)像，但它其實(shí)更“挑剔”！如果說(shuō)||是遇到假值就找備胎，那么??只會(huì)在 null 和 undefined 出現(xiàn)時(shí)才出手救場(chǎng)。今天咱們就來(lái)深入了解一下這個(gè) ECMAScript 2020 (ES11) 中的新工具。

"??" 是怎么工作的？—— 只處理“真正”的空值

?? 操作符的工作方式是：當(dāng)左邊的值是 null 或 undefined 時(shí)，才返回右邊的備用值。像 0、false、"" 這些“假值”，在??眼里都是 有效值，它們不會(huì)觸發(fā)備用計(jì)劃。

語(yǔ)法很簡(jiǎn)單：

let result = value1 ?? value2;

意思是：如果 value1 是 null 或 undefined，那就返回 value2；否則就直接用 value1。

舉個(gè)例子??：

let username = "" ?? "游客"; // 返回 ""
let score = 0 ?? 10;          // 返回 0

在這兩個(gè)例子中，空字符串 "" 和 0 雖然是“假值”，但因?yàn)樗鼈儾皇?null 或 undefined，?? 不會(huì)認(rèn)為它們無(wú)效，所以直接返回它們本身。這樣就避免了 || 操作符那種“誤判”的情況——如果你真的想用 0 或 "" 作為有效值，?? 就非常合適。

什么時(shí)候用"??"？

?? 非常適合在你 只想處理null或undefined 的場(chǎng)景下使用。比方說(shuō)，你希望某個(gè)變量可以是 0 或 false 這樣的值，而不想讓它們觸發(fā)默認(rèn)值。來(lái)看個(gè)小例子：

function getScore(score) {
  return score ?? 10;
}
 
console.log(getScore(0));    // 輸出: 0
console.log(getScore(null)); // 輸出: 10

在這個(gè)例子里，score 可以是 0，也可以是 null。如果傳入 0，?? 不會(huì)把它當(dāng)成空值，而是直接返回 0。但如果 score 是 null，它就會(huì)返回默認(rèn)值 10。這種行為對(duì)于某些場(chǎng)景非常有用，比如分?jǐn)?shù)為 0 的時(shí)候你不希望它被誤當(dāng)成無(wú)效值。

??和||的關(guān)鍵區(qū)別：用錯(cuò)容易踩坑哦！

在 JavaScript 里，??（空值合并運(yùn)算符）和 ||（邏輯或運(yùn)算符）都是用來(lái)設(shè)置默認(rèn)值的利器，初學(xué)者可能覺(jué)得它們差不多，但其實(shí)它們的行為有很大不同。為了避免代碼里的坑，我們必須清楚兩者的使用場(chǎng)景和差異。

1. "Falsy" vs. "Nullish"：誰(shuí)才是真的空？

||：它的邏輯是，遇到任何“假值”（falsy）就會(huì)返回備用值。這些“假值”包括：

• false
• 0
• ""（空字符串）
• null
• undefined
• NaN（非數(shù)字）

只要值是這些“假值”，|| 就會(huì)觸發(fā)備用值。

??：相比之下，?? 只關(guān)注 null 和undefined。也就是說(shuō)，像 0、false 和 "" 這些雖然看似“假”的值，但在 ?? 眼中是有效的，不會(huì)觸發(fā)備用值。

2. 使用場(chǎng)景：該選誰(shuí)？

• 使用 ||：當(dāng)你想對(duì)所有“假值”都提供一個(gè)備用方案時(shí)，比如 false、0 或空字符串。這種情況下，|| 是你最好的選擇。
• 使用 ??：如果你只想處理 null 和 undefined，而對(duì) 0、false 這些值保留，那么 ?? 更適合你。

3. 舉例對(duì)比：看代碼更直觀

let value1 = 0 || 5;    // value1 是 5
let value2 = 0 ?? 5;    // value2 是 0
 
let value3 = null || "默認(rèn)值";  // value3 是 "默認(rèn)值"
let value4 = null ?? "默認(rèn)值";  // value4 是 "默認(rèn)值"

在第一個(gè)例子中，value1 變成了 5，因?yàn)?0 被 || 認(rèn)為是“假值”。而在 ?? 的情況下，value2 保持為 0，因?yàn)?0 并不是 null 或 undefined，所以不會(huì)觸發(fā)備用值。

第二個(gè)例子里，null 在兩種操作符中都觸發(fā)了備用值，結(jié)果一樣。

4. 潛在的 Bug：小心別踩坑！

誤用 || 會(huì)導(dǎo)致一些你沒(méi)料到的問(wèn)題，特別是當(dāng) 0、false 或 "" 是有效值時(shí)。來(lái)看個(gè)例子：

function getDiscountedPrice(price) {
  return price || 100;  // 這里會(huì)返回 100，即使 price 是 0
}
 
console.log(getDiscountedPrice(0));  // 輸出: 100（錯(cuò)誤）

這里的邏輯會(huì)導(dǎo)致問(wèn)題，因?yàn)?0 是一個(gè)有效的價(jià)格，但由于 || 把它當(dāng)作“假值”，最終返回了備用值 100。解決方案就是用 ??，這樣 0 就不會(huì)被誤判了：

function getDiscountedPrice(price) {
  return price ?? 100;  // 這里會(huì)正確返回 0
}
 
console.log(getDiscountedPrice(0));  // 輸出: 0（正確）

5. 短路求值：誰(shuí)先說(shuō)了算？

|| 和 ?? 都使用了 短路求值，意思是如果左邊的值能決定結(jié)果，右邊的值就不會(huì)被計(jì)算。但兩者的判斷標(biāo)準(zhǔn)不同——|| 會(huì)在遇到任意“假值”時(shí)短路，而 ?? 只會(huì)在 null 或 undefined 時(shí)短路。

6.總結(jié)：怎么選？

• 如果你需要處理所有的“假值”（包括 0、false、""），就用 ||。
• 如果你只關(guān)心 null 和 undefined，而 0、false 這些值也是有效輸入，那就用 ??。

結(jié)合||和??：多重保險(xiǎn)，讓代碼更健壯！

有時(shí)候，你可能會(huì)遇到更復(fù)雜的場(chǎng)景，既要處理 null 和 undefined，又需要對(duì)其他“假值”如 0、false、"" 做特殊處理。這種情況下，我們可以把 || 和 ?? 結(jié)合起來(lái)，打造一個(gè)更加全面的“多重保險(xiǎn)”邏輯。

為什么要同時(shí)用||和??？

?? 負(fù)責(zé)處理 null 和 **undefined**，而 || 可以處理 所有“假值”（如 0、false、空字符串等）。有些情況下，你可能希望 null 和 undefined 返回默認(rèn)值，而對(duì)于其他“假值”則使用不同的邏輯處理。

來(lái)看個(gè)例子：

let result = (value ?? defaultValue) || fallbackValue;

在這段代碼中，我們做了兩步處理：

1.value ?? defaultValue：首先，?? 檢查 value 是否為 null 或 undefined。如果是，那么返回 defaultValue；如果不是，則直接返回 value。
2. || fallbackValue：接下來(lái)，結(jié)果再經(jīng)過(guò) ||，如果這個(gè)結(jié)果是“假值”（例如 0、false、空字符串等），就返回 fallbackValue。

舉個(gè)栗子??

假設(shè)你在處理一個(gè)分?jǐn)?shù)系統(tǒng)，null 或 undefined 的時(shí)候要用默認(rèn)分?jǐn)?shù)，但同時(shí)如果分?jǐn)?shù)是 0 也不能直接忽略，需要特殊處理。我們可以這樣寫(xiě)：

function getFinalScore(score) {
  return (score ?? 50) || "分?jǐn)?shù)無(wú)效";
}
 
console.log(getFinalScore(null));  // 輸出: 50（null 被 `??` 處理）
console.log(getFinalScore(0));     // 輸出: "分?jǐn)?shù)無(wú)效"（0 被 `||` 處理）
console.log(getFinalScore(80));    // 輸出: 80（有效分?jǐn)?shù)）

• null 的情況：score 是 null 時(shí)，?? 返回默認(rèn)值 50，|| 不會(huì)再觸發(fā)。
• 0 的情況：score 是 0 時(shí)，?? 不起作用，|| 將 0 視為“假值”，返回 "分?jǐn)?shù)無(wú)效"。
• 有效分?jǐn)?shù)的情況：score 是 80 時(shí)，直接返回 80。

什么時(shí)候使用這種組合？

這種組合特別適合需要處理復(fù)雜邏輯的場(chǎng)景，比如：

• null 或 undefined 的時(shí)候，返回一個(gè)默認(rèn)值；
• 其他“假值”（如 0、false）也需要單獨(dú)處理，避免被誤認(rèn)為無(wú)效。

結(jié)束

在 JavaScript 開(kāi)發(fā)中，?? 和 || 絕對(duì)是處理默認(rèn)值的利器，雖然它們看上去很像，但實(shí)際應(yīng)用中卻有明顯區(qū)別。|| 會(huì)把很多值當(dāng)作“假值”，包括 0、false、空字符串等；而 ?? 只關(guān)心 null 和 undefined。因此，合理選擇這兩個(gè)運(yùn)算符，能讓你避免不必要的 Bug，尤其是在處理特殊值的時(shí)候。

那么問(wèn)題來(lái)了，你在開(kāi)發(fā)中遇到過(guò) || 和 ?? 這種場(chǎng)景嗎？又是怎么處理的呢？歡迎在評(píng)論區(qū)分享你的開(kāi)發(fā)經(jīng)驗(yàn)或遇到的坑，咱們一起交流交流！

到此這篇關(guān)于JavaScript中的"??"和"||" 的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)JavaScript ?? ||內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論