展開運算子(Spread Operation) | Javascript

JavaScript 中的 短路運算(Short-circuit evaluation) 是一種邏輯運算的行為,它基於邏輯運算符(如 &&|| )的特性來提升開發程式碼的效率。短路運算允許在達到確定結果的情況下提前結束表達式的計算。

1. 邏輯與運算符 (&&)

在邏輯與運算中,如果第一個操作數是 falsy(例如,false、null、undefined、0、空字符串等),則表達式會返回第一個操作數的值,否則它會返回第二個操作數的值。

const result = a && b;

在這裡,如果 a 為 falsy,則 result 將為 a 的值,否則將為 b 的值。如果 a 為 falsy,JavaScript 將不會計算 b。

2. 邏輯或運算符 (||)

在邏輯或運算中,如果第一個操作數是 truthy(非 falsy 的值),則表達式會返回第一個操作數的值,否則它會返回第二個操作數的值。

const result = a || b;

在這裡,如果 a 為 truthy,則 result 將為 a 的值,否則將為 b 的值。如果 a 為 truthy,JavaScript 將不會計算 b。

3. 應用場景

短路運算通常用於簡化代碼和提高效率。它允許我們使用簡潔的方式處理默認值、條件執行等情況。 示例:使用默認值

const name = inputName || "Guest";

如果 inputName 為 falsy,表達式將返回默認值 “Guest”。 示例:防止訪問 undefined 屬性

const person = { name: "John" };
const age = person.age || "Unknown";

如果 person.age 為 undefined,age 將為默認值 “Unknown”。 示例:執行函數回調

function fetchData(callback) {
  callback && callback();
}

如果 callback 存在,就執行它,否則不執行。

4. Nullish Coalescing Operator(空值合併運算子)

一種用於處理 null 或 undefined 值的新型運算符,由 ?? 表示。它的主要目的是提供一種簡潔的方式來選擇默認值,同時避免將 falsy 值視為合法的默認值。

使用方式:

const result = someValue ?? defaultValue;

這個表達式的意思是,如果 someValue 是 null 或 undefined,則 result 將等於 defaultValue,否則 result 將等於 someValue。

應用場景:

默認值設置:

const username = userInput ?? "Guest";

如果 userInput 為 null 或 undefined,username 將設置為默認值 “Guest”。 避免使用 falsy 值:

const count = 0;
const totalCount = count ?? 10;

在這裡,如果 count 是 0,使用 Nullish Coalescing Operator 仍然會將 totalCount 設置為 0,而不是使用默認值 10。

與 || 運算子的區別:

傳統上,我們使用 || 運算子來實現類似的功能,但它將將 falsy 值(例如空字符串、0、false)視為無效的默認值。Nullish Coalescing Operator 則專注於處理 null 和 undefined 值。

const result = someValue || defaultValue; // 如果 someValue 是 falsy,則 result 將等於 defaultValue
const result = someValue ?? defaultValue; // 如果 someValue 是 null 或 undefined,則 result 將等於 defaultValue

這樣,Nullish Coalescing Operator 提供了更精確的控制,避免了使用 || 運算子可能導致的問題。

Nullish Coalescing Operator 是 ES11(也稱為 ES2020)的一部分,因此在使用之前,請確保su3的環境支持該版本。

結論:

短路運算是 JavaScript 中常見的一種開發技巧,但在使用時需要注意避免潛在的副作用和混淆。