展開運算子(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 中常見的一種開發技巧,但在使用時需要注意避免潛在的副作用和混淆。
Tags