JavaScript - 空值合并運算符

Hello, 有志青年程序員們！今天，我們將深入探討JavaScript的一個讓你的代碼更乾淨、更高效的有趣特性。它叫做空值合并運算符（Nullish Coalescing Operator），我相信一旦你理解了它的力量，你會和我一樣覺得它很令人興奮！

空值合并運算符是什麼？

在我們深入細節之前，我們先從一個簡單的問題開始：你有沒有在使用某個值之前檢查過它是否為null或undefined？如果你點頭，那麼接下來的內容你會喜歡！

空值合并運算符（用??表示）是一個邏輯運算符，當其左邊的操作數是null或undefined時，它返回右邊的操作數，否則返回左邊的操作數。

現在，我知道這可能一開始聽起來有點混亂，但別擔心！我們會通過許多例子一步步分解。

語法

空值合并運算符的語法出奇地簡單：

leftExpr ?? rightExpr

在這裡，leftExpr和rightExpr可以是任何類型的表達式。如果leftExpr是null或undefined，運算符返回rightExpr。否則，它返回leftExpr。

示例

讓我們通過一些例子來看看它在實際中是如何工作的。

示例 1：基本使用

let username = null;
let displayName = username ?? "Anonymous";

console.log(displayName); // 輸出： "Anonymous"

在這個例子中，username是null，所以空值合并運算符返回"Anonymous"。這就像說："如果username有值，就用那個。如果沒有，就用'Anonymous'。"

示例 2：與邏輯或的比較

你可能會想："我們不能用邏輯或運算符（||）來做這件事嗎？" 好吧，讓我們看看差別：

let count = 0;

let result1 = count || 10;
let result2 = count ?? 10;

console.log(result1); // 輸出： 10
console.log(result2); // 輸出： 0

驚喜！邏輯或運算符將0視為假值並返回10，而空值合并運算符只檢查null或undefined，所以它返回0。

示例 3：嵌套空值合并

我們甚至可以鏈接多個空值合并運算符：

let user = {
name: "Alice",
age: null
};

let userAge = user.age ?? user.yearOfBirth ?? "Unknown";

console.log(userAge); // 輸出： "Unknown"

在這裡，我們首先檢查user.age不是null或undefined。既然它是null，那我們再檢查user.yearOfBirth。由於它不存在（undefined），我們最終回退到"Unknown"。

短路求值

空值合并運算符的一個最酷的特性是短路求值。這意味著如果左邊的操作數不是null或undefined，則右邊的操作數甚至不會被評估！

let x = 5;
let y = x ?? console.log("這不會被打印");

console.log(y); // 輸出： 5

在這個例子中，由於x不是null或undefined，所以右邊的console.log()從未被執行。這對於性能優化來說非常有用！

方法總結表

這裡有一個方便的表格，總結了我們涵蓋的關鍵方法和概念：

方法/概念	描述	示例
空值合并運算符 (??)	当左邊的操作數是null或undefined時，返回右邊的操作數	let result = null ?? "default"
短路求值	如果左邊的操作數不是null或undefined，則右邊的操作數不會被評估	let y = 5 ?? expensiveOperation()
鏈接	多個??運算符可以被鏈接	let z = a ?? b ?? c ?? "default"

結論

好了，各位！現在你們已經了解了空值合并運算符，它是你JavaScript工具箱中的一個強大工具。它幫助你寫出更乾淨、更具表達性的代碼，特別是在處理可能為null或undefined的值時。

記住，編程就是關於解決問題的，空值合并運算符就像一把瑞士軍刀，用於處理那些討厭的null和undefined情況。所以勇往直前，自信編程！

在我們結束之前，讓我分享一個來自我教學經驗的小故事。我曾經有一個學生，他在代碼中處理null值時遇到了困難。他到處使用複雜的if-else語句，這使得他的代碼難以閱讀和維護。當我向他介紹空值合并運算符時，他的眼睛亮了起來，就像剛剛發現了魔法一樣。他的代碼一夜之間變得更乾淨，他無法停止談論這讓他的生活變得多麼容易。誰知道呢？也許你會在編碼旅程中有一個類似的"啊哈！"時刻！

持續練習，保持好奇心，並且快樂編程！

Credits: Image by storyset