解鎖 JavaScript：邏輯或 (||) 與空合併運算子 (??)-js教程-PHP中文網

Unlocking JavaScript: Logical OR (||) vs Nullish Coalescing Operator (??)

介紹

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'

登入後複製

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