帶有 ECMAScript 2020 的 JavaScript 中的空合併運算符
簡介
在請求-響應生命週期中工作時 ，您要確保帶有所需正文的響應 - 或者至少是一個信息性響應到達，以便請求數據的客戶端保持在循環中。 空值的情況 ，您可能希望返回不同的結果。
JavaScript 確保這可以通過它的 nullish 操作符 來處理 也稱為 Null 合併運算符 ，通過 ECMAScript 2020 添加到語言中 .有了它，您可以返回一個值 或 根據布爾表達式將其分配給其他值。
空合併運算符 屬於短路邏輯運算符 ，我們稍後會看一下。
它有點類似於 條件運算符 ，有時也稱為 三元運算符 ：
// Null Coalescing Operator //
// If the left-hand side is null, the righthand side is returned
result = nullValue ?? defaultValue
// Conditional operator //
// If the condition is true, the left side is assigned, otherwise, the right side is assigned
condition ? value : value2
什麼是短路？
JavaScript 從左到右計算運算符。在我們需要both的地方使用排他性運營商 要評估為 true 的值，有時只檢查第一個評估語句就足夠了。
如果運算符左邊是false ，不管右邊，運算符的結果是false ，因此評估對方沒有意義，為了保持計算能力而跳過它。
在 ES2020 之前，JavaScript 只有兩個短路邏輯運算符：
- 邏輯運算符AND -
&& - 邏輯運算符OR -
||
隨著新的更新，JavaScript 引入了另一個：
- 空合併 運算符 -
??
短路本身使代碼更高效，因為需要進行的評估更少，但是，通過 Null Coalescing 運算符，我們也可以根據短路操作更改代碼邏輯。
例如：
let x = 10;
let y = 20;
let result;
if(x+y > 20){
result = "x+y is greater than 20";
}
console.log(result);
此代碼將導致：
x+y is greater than 20
不過，我們也可以放棄 if 完全聲明並使用短路 AND 運算符來縮短語句：
let x = 10;
let y = 20;
(x+y) > 20 && console.log("x+y is greater than 20");
(x+y) > 20 計算結果為 true 因此進入下一個塊，並打印消息。
如果 (x+y) > 20 是假的 （我們將在稍後討論），JavaScript 解釋器甚至不會查看表達式的第二部分，並且該塊永遠不會運行。
同樣地，我們可以以類似的方式使用邏輯 OR 運算符：
let x = 10;
let y = 20;
(x-y) > 0 || console.log("x+y is lesser than 0");
免費電子書：Git Essentials
查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！
這自然會導致：
x+y is lesser than 0
這些例子很簡單，但是邏輯運算符可以解決很多實際問題，讓你的代碼更簡潔。但是，如果使用不當，您可能會感到頭疼。
真值和假值
使用邏輯運算符時，您會遇到真值這些術語 和 假值 .
一個真實價值 是任何值不是：
nullundefined0''- 空字符串falseNaN- 不是數字
所有這些值都被認為是falsy .
在 JavaScript 中，所有 虛假值 被評估為 false 在循環或 if 中使用時 陳述和所有真實價值 被評估為 true .
現在我們已經涵蓋了先決條件，最後讓我們看看 Nullish Operator .
空值合併運算符
空運算符 檢查值是否為 nullish ，而不是虛假 . 空值 是 undefined 或 null .
例如，讓我們模擬一個從數據庫中檢索用戶並返回其姓名的用戶服務。用戶不存在的概率為 10%，由 Math.random() 規定 稱呼。在對數據庫的 10 次調用中，我們可能會看到至少一個丟失的用戶 - 用 null 表示 結果：
class DbConnection {
find(id) {
if(Math.random() > 0.9) {
return null;
} else {
return `John Doe ${id}`;
}
}
}
const db = new DbConnection();
for (let i = 0; i < 10; i++) {
let user = db.find(i);
if(user != null){
console.log(user);
} else {
console.log('User not found');
}
}
代碼將輸出名稱或表示數據庫中不存在用戶的消息，但這需要我們在 if 中執行空檢查 聲明。
這導致：
John Doe 0
John Doe 1
User not found
John Doe 3
John Doe 4
John Doe 5
User not found
User not found
John Doe 8
John Doe 9
這次運行的偶然性似乎很奇怪 - 3 null 結果！這段代碼工作得很好，可以處理 null 如果數據庫返回 null 的情況 價值。
或者，我們可以使用更簡潔的東西：
class DbConnection {
find(id) {
return Math.random() > 0.9 ? null : `John Doe ${id}`
}
}
const db = new DbConnection();
for (let i = 0; i < 10; i++) {
let user = db.find(i) ?? "User not found"
console.log(user)
}
使用條件運算符 ，我們返回了 null 或 John Doe 和他們各自的身份證。如果 Math.random() > 0.9 , null 被返回，因此每次調用數據庫時都有 10% 的概率返回它。
然後，假設可能的 null values - 我們使用了 Nullish Operator 為 user 分配一個新值 結果是 null .如果 db.find() 返回 null , 右邊的值開始並被返回。
這段代碼比 if-else 更簡潔、更短 語句和 if-else 語句更傾向於級聯並且變得更加複雜。不過，鏈接多個短路運算符也很難閱讀，因此替換 all 並不是真正可取的 if-else 塊：
let s1 = (Math.random() > 0.5 ? 1 : null) ?? (Math.random() > 0.5 ? 4 : (Math.random() > 0.5 ? null : 1))
console.log(s1)
你知道這會打印什麼嗎？考慮到隨機可能性，您可能需要一些時間來手動解析它並查看您可以預期哪些值。此代碼傾向於導致 1 使用 null 和 4 在某些情況下，因為在這種情況下 nullish 運算符的返回默認值是 another null .通常，在這種情況下，您不會使用超過一兩個運算符。
結論
總結一下，nullish 操作符的唯一目的 是允許你總是返回某種默認值，而不是返回不存在的東西——在 JavaScript 中，這就是 null 和 undefined 意思。
