解鎖 JavaScript：邏輯或 (||) 與空合併運算子 (??)

介紹

JavaScript 作為最受歡迎的程式語言之一，為開發人員提供了一系列運算子來處理各種邏輯運算。其中，邏輯或 (||) 和空值合併 (??) 運算子是管理預設值和處理空值的基本工具。本文將深入探討這兩個運算子之間的差異、它們的用例，以及實際、複雜的範例來說明它們的用法。

了解邏輯 OR (||) 運算符

JavaScript 中的邏輯 OR (||) 運算子廣泛用於傳回其運算元中的第一個真值，如果沒有一個真值，則傳回最後一個值。主要用於設定預設值。

句法

result = operand1 || operand2;

它是如何運作的

||運算子從左到右計算，如果第一個運算元為真則傳回；否則，它計算並傳回第二個運算元。

範例 1：設定預設值

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput || defaultText;
console.log(message); // Output: 'Hello, World!'

在此範例中，userInput 是一個空字串（假），因此傳回 defaultText。

範例 2：處理多個值

let firstName = null;
let lastName = 'Doe';

let name = firstName || lastName || 'Anonymous';
console.log(name); // Output: 'Doe'

這裡，firstName 為 null（假），因此 lastName 被傳回，因為它是 true。

邏輯 OR (||) 運算子的限制

|| 的主要限制運算子的一個缺點是它將多個值視為假值，例如 0、NaN、''、false、null 和 undefined。當這些值本應有效時，這可能會導致意外結果。

引入空值合併 (??) 運算符

Nullish Coalescing (??) 運算子是 JavaScript 的最新補充，在 ES2020 中引入。它旨在處理 null 或 undefined 明確意味著唯一考慮的空值的情況。

句法

result = operand1 ?? operand2;

它是如何運作的

??當左側運算元為 null 或未定義時，運算子傳回右側運算元。否則，它會傳回左側操作數。

範例 1：設定預設值

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput ?? defaultText;
console.log(message); // Output: ''

在本例中，userInput 是一個空字串，不為 null 或未定義，因此傳回。

範例 2：處理空值

let firstName = null;
let lastName = 'Doe';

let name = firstName ?? lastName ?? 'Anonymous';
console.log(name); // Output: 'Doe'

此處，firstName 為 null，因此傳回 lastName，因為它既不是 null 也不是未定義。

比較邏輯 OR (||) 和空合併 (??) 運算符

範例 1：比較虛假值

let value1 = 0;
let value2 = '';

let resultOR = value1 || 'default';
let resultNullish = value1 ?? 'default';

console.log(resultOR); // Output: 'default'
console.log(resultNullish); // Output: 0

在此範例中，|| 認為 0 為假。運算符，但它是 ?? 的有效值運算符。

範例 2：同時使用兩個運算符

let userInput = null;
let fallbackText = 'Default Text';

let message = (userInput ?? fallbackText) || 'Fallback Message';
console.log(message); // Output: 'Default Text'

這裡，userInput 為 null，因此 ?? 使用了fallbackText操作員。然後透過 || 檢查結果運算符，但由於 FallbackText 為真，因此傳回它。

邏輯 OR (||) 和空合併 (??) 運算子的複雜範例

範例 3：物件的巢狀操作

考慮一個場景，您需要為嵌套物件屬性設定預設值。

let userSettings = {
  theme: {
    color: '',
    font: null
  }
};

let defaultSettings = {
  theme: {
    color: 'blue',
    font: 'Arial'
  }
};

let themeColor = userSettings.theme.color || defaultSettings.theme.color;
let themeFont = userSettings.theme.font ?? defaultSettings.theme.font;

console.log(themeColor); // Output: 'blue'
console.log(themeFont); // Output: 'Arial'

在這個範例中，userSettings.theme.color是一個空字串，所以使用defaultSettings.theme.color。 userSettings.theme.font 為 null，因此使用 defaultSettings.theme.font。

範例 4：具有預設值的函數參數

處理函數參數時，您可能想要為缺少的參數提供預設值。

function greet(name, greeting) {
  name = name ?? 'Guest';
  greeting = greeting || 'Hello';

  console.log(`${greeting}, ${name}!`);
}

greet(); // Output: 'Hello, Guest!'
greet('Alice'); // Output: 'Hello, Alice!'
greet('Bob', 'Hi'); // Output: 'Hi, Bob!'
greet(null, 'Hey'); // Output: 'Hey, Guest!'

在此範例中，名稱參數使用 ??如果 name 為 null 或未定義，則使用運算子設定預設值「Guest」。問候語參數使用 ||如果問候語是除 null 或未定義之外的任何虛假值，則運算子設定預設值「Hello」。

範例 5：與可選鏈結合

可選連結 (?.) 可以與 || 組合和 ？ ？安全地處理深度嵌套的物件屬性。

let user = {
  profile: {
    name: 'John Doe'
  }
};

let userName = user?.profile?.name || 'Anonymous';
let userEmail = user?.contact?.email ?? 'No Email Provided';

console.log(userName); // Output: 'John Doe'
console.log(userEmail); // Output: 'No Email Provided'

在此範例中，可選連結可確保如果屬性路徑的任何部分不存在，則傳回未定義，從而防止錯誤。 ||和 ？ ？然後運算符提供適當的預設值。

最佳實踐和用例

1. 使用||對於廣泛違約：

   • 當您需要為一系列虛假條件（例如，空字串、0、NaN）提供預設值時。

2. 使用??精確的空值檢查：

   • 當您特別想要處理 null 或 undefined 而不影響其他虛假值時。

3. 結合兩者：

   • 使用 || 的組合和 ？ ？對於需要明確處理真/假值和空值的複雜場景。

常見問題解答

邏輯或 (||) 運算子的作用是什麼？
邏輯或 (||) 運算子傳回其運算元中的第一個真值，如果沒有真值，則傳回最後一個運算元。

什麼時候應該使用 Nullish Coalescing (??) 運算子？
當您需要專門處理 null 或未定義而不將其他虛假值（如 0 或空字串）視為 null 時，請使用 Nullish Coalescing (??) 運算子。

我可以同時使用兩個運算子嗎？
是的，您可以同時使用 ||和 ？ ？一起處理不同類型的值並確保您的程式碼邏輯有效地覆蓋各種情況。

怎麼辦||處理空字串？
||運算子將空字串視為假字串，因此如果第一個運算元是空字串，它將傳回下一個運算元。

所有瀏覽器都支援 Nullish Coalescing (??) 運算子嗎？
這 ？ ？支援 ES2020 的現代瀏覽器和環境支援運算子。對於較舊的環境，您可能需要使用像 Babel 這樣的轉譯器。

|| 之間有什麼區別和 ？ ？運營商？
主要差異在於 ||將多個值視為假值（例如 0、''、false），而 ??僅將 null 和 undefined 視為空值。

結論

理解 JavaScript 中邏輯 OR (||) 和空合併 (??) 運算子之間的差異對於編寫健全且無錯誤的程式碼至關重要。 ||運算子非常適合廣泛的預設場景，而 ??非常適合精確處理空值。透過適當地使用這些運算符，您可以確保您的程式碼有效地處理各種資料狀態，從而提供無縫的使用者體驗。

以上是解鎖 JavaScript：邏輯或 (||) 與空合併運算子 (??)的詳細內容。更多資訊請關注PHP中文網其他相關文章！