JavaScript 中的空值合併運算符

Articles

本文解釋了 JavaScript 中的空值合併運算符。

YouTube Video

JavaScript 中的空值合併運算符

在 JavaScript 中，空值合併運算符（??）判斷值是否為 null 或 undefined，如果是，則返回另一個預設值。這與常用的邏輯 OR 運算符（||）類似，但不同之處在於它專注於處理 null 和 undefined。

邏輯或運算符在左側值為「虛假值」（falsy）時返回右側值，而空合併運算符僅在左側值為null或undefined時返回右側值。此功能允許正確處理像 0 和空字串（""）這樣的值。

基本語法

1let result = value ?? defaultValue;

value 是正在檢查的值。
defaultValue 是當 value 為 null 或 undefined 時返回的值。

使用空值合併運算符的範例

以下範例實現了一個處理流程，在值為 null 或 undefined 時返回預設值。

1let name = null;
2let defaultName = "Anonymous";
3
4// If name is null or undefined, 'Anonymous' is returned
5let displayName = name ?? defaultName;
6console.log(displayName); // "Anonymous"

在此程式碼中，由於 name 的值是 null，所以返回了 defaultName（"Anonymous"）。如果 name 是 null 或 undefined 以外的值，則返回該值。

與邏輯 OR 運算符的區別

空合併運算符與邏輯或運算符類似，但有一個重要區別。邏輯或運算符檢查「虛假值」（falsy 值，例如 false、0、NaN、""、null、undefined 等），而空合併運算符僅檢查 null 和 undefined。

邏輯 OR 運算符範例：

1let count = 0;
2let defaultCount = 10;
3
4// Since count is falsy (0), defaultCount is returned
5let result = count || defaultCount;
6console.log(result); // 10

空值合併運算符範例：

1let count = 0;
2let defaultCount = 10;
3
4// Since count is neither null nor undefined, count is returned as is
5let result = count ?? defaultCount;
6console.log(result); // 0

通過這種方式，空合併運算符保留了有效值例如 0 和空字符串（""），僅在必要時返回默認值。由於邏輯或運算符將這些值視為「虛假值」（falsy），從而返回默認值，因此根據使用情況選擇適當的運算符非常重要。

組合使用時的範例：

空合併運算符也可以與其他邏輯運算符結合使用，但在使用時需要謹慎。

1let a = null;
2let b = 0;
3let c = false;
4
5// SyntaxError
6let result = a ?? b || c;

例如，當與邏輯或運算符（||）或邏輯與運算符（&&）一起使用時，應使用括號來明確運算順序。

1let a = null;
2let b = 0;
3let c = false;
4
5let result = (a ?? b) || c;
6console.log(result); // false

在此範例中，首先評估 a ?? b，由於 a 是 null，所以返回了 b。然後，會評估 b || c，由於 b 是假值，最終返回 c。

空合併運算符的應用場景

以下是空合併運算符的應用場景。

表單的預設值 當用戶未輸入任何內容時，這可以用於為表單輸入欄位設定默認值的情境中。

1let userAge = null;
2let defaultAge = 18;
3let age = userAge ?? defaultAge;
4console.log(age); // 18

API 回應處理 當從 API 的回應中值為 null 或 undefined 時，可以執行回退處理。

1let apiResponse = {
2    title: "New Article",
3    description: null
4};
5
6let title = apiResponse.title ?? "Untitled";
7let description = apiResponse.description ?? "No description available";
8console.log(title);        // "New Article"
9console.log(description);  // "No description available"

總結

空合併運算符（??）在初始化數據和處理 API 響應時非常有用，因為它在遇到 null 或 undefined 時會返回默認值。特別是，當需要正確處理例如 0 或空字符串這樣的「虛假值」（falsy）時，它比傳統的邏輯或運算符（||）更合適。

關於空值合併賦值運算子 (??=)

概覽

在 JavaScript 中，引入了 空值合併賦值運算子 ??=，以有效地為值為 null 或 undefined 的變數賦新值。此運算子是當特定值為 null 或 undefined 時，為變數賦值的便利快捷方式。

基本用法

空合併賦值運算符的作用如下：。

如果變數為 null 或 undefined，則賦予右側的值。
如果變數既不是 null 也不是 undefined，則保持不變，保留當前的值。

語法

空合併賦值運算符的基本語法如下：。

1x ??= y;

如果 x 是 null 或 undefined，則將 y 賦值給 x。
如果 x 已經有值（不是 null 或 undefined），則不會改變 x 的值。

範例

我們來看一個空值合併賦值運算子的基本範例。

1let userName = null;
2let defaultName = "Guest";
3
4// Since userName is null, defaultName is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Guest"

在此程式碼中，由於 userName 是 null，因此賦值為 defaultName。

接下來，這是一個值既不是 null 也不是 undefined 的範例。

1let userName = "Alice";
2let defaultName = "Guest";
3
4// Since userName is "Alice", nothing is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Alice"

在這種情況下，由於 userName 已設定為 "Alice"，因此未進行任何賦值。

與其他賦值運算子的比較

JavaScript 也具有其他幾種賦值運算子。特別是與邏輯或賦值運算子 (||=) 的區別非常重要。

1let value = 0;
2value ||= 10;  // Assign 10 if value is falsy
3console.log(value);  // 10

邏輯或賦值運算符即使在遇到例如 false、0 或空字符串(""）之類的虛假值（falsy）時也會執行賦值，而空合併賦值運算符僅在值為 null 或 undefined 時運行。

1let value = 0;
2value ??= 10;
3// Since value is neither null nor undefined,
4// nothing is assigned
5console.log(value);  // 0

由於空合併賦值運算符僅在值為 null 或 undefined 時運行，因此當您需要保留 0 或 false 等值時，它非常有用。

實際應用案例

空合併賦值運算符的一個真實用例如下所示：。

設定預設值

當用戶輸入或 API 回應可能為 null 或 undefined 時，這對設定預設值非常有用。

1let userSettings = {
2    theme: null,
3    notifications: true
4};
5
6// Since theme is null, "light" is assigned
7userSettings.theme ??= "light";
8
9console.log(userSettings.theme);  // "light"

處理可選參數

當函數參數未指定時，也可以用於執行預設動作。

1function greet(name) {
2    name ??= "Guest";
3    console.log(`Hello, ${name}!`);
4}
5
6greet();  // "Hello, Guest!"
7greet("Alice");  // "Hello, Alice!"

總結

空合併賦值運算符（??=）僅在左側值為 null 或 undefined 時執行賦值，使代碼更加簡潔並有助於防止意外的賦值。特別是在處理像 0 或 false 這樣的 "falsy" 值時，它可能比傳統的邏輯或運算符（||=）更加合適。

透過使用這個運算符，您可以撰寫更健壯且可讀性更高的程式碼。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。請也查看我們的 YouTube 頻道。

YouTube Video

JavaScript中的`truthy`和`falsy`JavaScript 的內建函數