在JavaScript的if判斷中添加默認條件可通過邏輯運算符||和??實現，||返回第一個真值，適用于一般默認值場景，如name = name || “guest”；??僅在值為NULL或undefined時使用默認值，更嚴格，如score = score ?? 0；可在if條件中直接使用，默認處理更簡潔，如if((status ?? “inactive”) === “active”)；處理多個變量可用鏈式操作或復雜條件判斷；避免類型轉換錯誤可優先??或嚴格檢查value === null || value === undefined；函數參數默認值推薦es6默認參數語法，如function greet(name = “guest”)，或結合解構賦值處理對象參數，確保代碼健壯性。
在JavaScript的 if 判斷中添加默認條件，本質上是確保即使某些變量或表達式的值缺失、為 null、undefined、0、”” 或 false 時，代碼依然能按照預期執行。這通常通過邏輯運算符 || (或) 和 ?? (空值合并運算符) 實現。
解決方案
-
使用 || (或) 運算符:
|| 運算符會返回第一個真值（truthy value），如果所有值都是假值（falsy value），則返回最后一個值。 這可以用來提供一個默認值。
function greet(name) { name = name || "Guest"; // 如果 name 是 falsy，則使用 "Guest" console.log("Hello, " + name + "!"); } greet("Alice"); // 輸出: Hello, Alice! greet(); // 輸出: Hello, Guest! greet(null); // 輸出: Hello, Guest! greet(""); // 輸出: Hello, Guest!在這個例子中，如果 name 是 null、undefined 或空字符串，name || “Guest” 表達式會返回 “Guest”，從而避免了程序出錯或顯示不期望的結果。 需要注意的是，0 也會被認為是 falsy value。
-
使用 ?? (空值合并運算符):
?? 運算符只在左側的值為 null 或 undefined 時才返回右側的值。 這比 || 更嚴格，因為它不會將 0 或空字符串視為需要替換的“空”值。
function processScore(score) { score = score ?? 0; // 如果 score 是 null 或 undefined，則使用 0 console.log("Score: " + score); } processScore(50); // 輸出: Score: 50 processScore(null); // 輸出: Score: 0 processScore(undefined); // 輸出: Score: 0 processScore(0); // 輸出: Score: 0這里，只有當 score 明確為 null 或 undefined 時，才會使用默認值 0。 這在區分“沒有值”和“值為0”的情況下非常有用。
-
在 if 條件中直接使用默認值:
可以在 if 語句的條件部分直接使用 || 或 ?? 運算符，以確保條件始終有一個值可以評估。
function checkStatus(status) { if ((status ?? "inactive") === "active") { console.log("User is active."); } else { console.log("User is inactive."); } } checkStatus("active"); // 輸出: User is active. checkStatus(null); // 輸出: User is inactive. checkStatus(undefined); // 輸出: User is inactive. checkStatus(); // 輸出: User is inactive. （如果 status 未定義）這種方式簡潔明了，直接在條件判斷中處理了默認值的情況。
如何處理多個可能為空的變量？
處理多個可能為空的變量時，可以鏈式使用 || 或 ?? 運算符，或者使用更復雜的條件判斷。
鏈式使用:
function displayInfo(name, city, country) { const displayName = name || "Unknown Name"; const displayCity = city || "Unknown City"; const displayCountry = country || "Unknown Country"; console.log(`Name: ${displayName}, City: ${displayCity}, Country: ${displayCountry}`); } displayInfo("Bob"); // 輸出: Name: Bob, City: Unknown City, Country: Unknown Country displayInfo(null, "New York"); // 輸出: Name: Unknown Name, City: New York, Country: Unknown Country
復雜條件判斷:
function calculatePrice(price, discount, tax) { let finalPrice = price ?? 0; // 默認價格為 0 if (discount) { finalPrice -= discount; } if (tax) { finalPrice += tax; } return finalPrice; } console.log(calculatePrice(100, 10, 5)); // 輸出: 95 console.log(calculatePrice(100, null, 5)); // 輸出: 105 console.log(calculatePrice(null, 10, 5)); // 輸出: 5
如何避免意外的類型轉換導致錯誤？
JavaScript 的類型轉換可能導致 || 運算符產生意外的結果。 例如，0 || 1 會返回 1，因為 0 被認為是 falsy。 為了避免這種情況，可以使用 ?? 運算符，或者在條件判斷中使用更嚴格的類型檢查。
使用 ?? 運算符:
如前所述，?? 運算符只在值為 null 或 undefined 時才返回默認值，避免了 falsy 值的干擾。
嚴格類型檢查:
function processValue(value) { if (value === null || value === undefined) { value = "Default Value"; } console.log("Value: " + value); } processValue(null); // 輸出: Value: Default Value processValue(undefined); // 輸出: Value: Default Value processValue(0); // 輸出: Value: 0 (不會被替換)
如何在函數參數中使用默認條件？
在函數參數中使用默認條件是一種簡潔的方式，可以確保函數在沒有接收到特定參數時也能正常工作。
ES6 默認參數:
ES6 引入了默認參數語法，允許在函數定義時為參數指定默認值。
function createGreeting(name = "Guest", greeting = "Hello") { console.log(`${greeting}, ${name}!`); } createGreeting("Alice", "Hi"); // 輸出: Hi, Alice! createGreeting("Bob"); // 輸出: Hello, Bob! createGreeting(); // 輸出: Hello, Guest!
這比使用 || 或 ?? 運算符更清晰，也更容易閱讀。 默認參數只在參數為 undefined 時生效，不會對 null 或其他 falsy 值生效。
結合解構賦值和默認參數:
可以結合解構賦值和默認參數，處理對象參數中的默認值。
function displayProfile({ name = "Anonymous", age = 0 } = {}) { console.log(`Name: ${name}, Age: ${age}`); } displayProfile({ name: "Charlie", age: 30 }); // 輸出: Name: Charlie, Age: 30 displayProfile({ name: "David" }); // 輸出: Name: David, Age: 0 displayProfile(); // 輸出: Name: Anonymous, Age: 0 displayProfile({}); // 輸出: Name: Anonymous, Age: 0
在這個例子中，{ name = “Anonymous”, age = 0 } = {} 確保即使沒有傳遞任何參數，或者傳遞了一個空對象，函數也能正常工作，并使用默認值。
