別迷惑？與|| JavaScript：這就是它們的不同之處！

??與|| JavaScript 中：鮮為人知的區別

介紹

JavaScript 提供了多種方法來處理程式碼中的未定義或空值。用於此目的的兩個常見運算符是 空值合併運算符 (??) 和 邏輯 OR 運算符 (||)。雖然這些操作員乍看之下似乎很相似，但他們的行為在某些情況下可能有很大不同。了解這兩個運算子之間的差異至關重要，特別是對於想要編寫更精確且無錯誤的程式碼的初學者。

在本指南中，我們將探討 ?? 之間的差異和 ||在 JavaScript 中，透過範例逐步分解它，以便您可以立即從零變成英雄。

什麼是空合併運算子 (??)？

無效合併運算子 ??用於在處理 null 或 undefined 時提供後備值。它僅檢查值是否為 null 或未定義，如果是，則傳回提供的後備值。

文法:

let result = value ?? fallbackValue;

在此表達式中，如果 value 為 null 或未定義，則會傳回fallbackValue。

範例 1：使用空合併運算子 (??)

let name = null;
let defaultName = name ?? 'John Doe';

console.log(defaultName); // Output: 'John Doe'

在此範例中，name 為 null，因此將 defaultName 指定為「John Doe」作為後備。

要點：

• ??檢查 null 或未定義。
• 如果NOT null 或未定義，則傳回左側的值，否則，傳回右側的回退值。

什麼是邏輯或運算子 (||)？

邏輯或運算符||是另一個用於後備值的運算符，但其工作方式不同。它檢查表達式的左側是否為 falsy 值。在 JavaScript 中，假值包括 null、undefined、false、0、NaN 和 ''（空字串）。

文法:

let result = value || fallbackValue;

如果值是假的，則回傳fallbackValue。

範例 2：使用邏輯或運算子 (||)

let age = 0;
let defaultAge = age || 18;

console.log(defaultAge); // Output: 18

在本例中，年齡為 0，這是一個假值，因此 defaultAge 被分配為 18。

要點：

• ||檢查是否有假值。
• 如果左邊的值為假，則傳回右側的後備值。

之間的主要區別？和 ||

乍一看，??和 ||似乎有相同的目的——提供後備值——但有一個重要的區別：

• ??運算子僅檢查 null 或未定義。
• ||運算子檢查是否有任何虛假值。

當您處理虛假但有效的值（如 0、'' 或 false）時，這種微妙的差異變得至關重要。

例3：??與||具有虛假值

let result = value ?? fallbackValue;

此處，count 為 0，這是一個有效值，但在 JavaScript 中為假值。

• 使用 ??，defaultCount1 保留 0，因為 0 既不是 null 也不是未定義的。
• 使用 ||，defaultCount2 變成 10，因為 0 是一個假值。

你應該什麼時候使用？或||？

選擇??和 ||取決於您想要的特定行為。

使用 ？ ？什麼時候：

• 您想要專門處理 null 或 undefined 值，而不影響 0、false 或 '' 等虛假值。
• 您需要保留有效的假值，例如 0（有效計數）或 ''（有效的空字串）。

範例：

let name = null;
let defaultName = name ?? 'John Doe';

console.log(defaultName); // Output: 'John Doe'

在此範例中，空字串 '' 是有效的使用者輸入，所以 ??允許它通過而不用後備替換它。

使用||什麼時候：

• 您希望將所有虛假值（例如 0、false、NaN、'' 和 undefined）視為需要後備值。
• 您可以替換 0 或 false 等值。

範例：

let result = value || fallbackValue;

這裡， false 被視為 false，並使用後備「未登入」。

常見陷阱以及如何避免它們

現在您知道了其中的區別，讓我們看看初學者經常犯的一些常見錯誤以及如何避免它們。

錯誤1：使用||對於有效的虛假值

let age = 0;
let defaultAge = age || 18;

console.log(defaultAge); // Output: 18

問題：您想顯示 0 作為分數，但是 ||將其替換為“無分數”，因為 0 為假。

解：使用??允許 0 通過。

let count = 0;
let defaultCount1 = count ?? 10; // Using nullish coalescing
let defaultCount2 = count || 10; // Using logical OR

console.log(defaultCount1); // Output: 0
console.log(defaultCount2); // Output: 10

錯誤 2：誤解空合併

let userInput = '';
let fallbackInput = userInput ?? 'default input';

console.log(fallbackInput); // Output: ''

解釋：userPreference 為 null，因此使用後備 false。這是 ??.

的正確行為

常見問題解答

我可以使用嗎？和 ||一起？

是的，如果需要，您可以在同一表達式的不同部分使用這兩個運算符。

範例：

let isLoggedIn = false;
let loginStatus = isLoggedIn || 'Not logged in';

console.log(loginStatus); // Output: 'Not logged in'

這首先使用 ?? 檢查是否為 null 或未定義。然後使用 || 檢查其他虛假值。

所有瀏覽器都支援 Nullish 合併運算子嗎？

??現代瀏覽器支援運算符，但對於較舊的環境，您可能需要使用像 Babel 這樣的轉譯器。

每個運營商的用例是什麼？

• 使用??當你特別關心 null 或 undefined 時。
• 使用||當你想要處理任何虛假值。

做 ？ ？使用其他虛假值？

不，??只檢查 null 和 undefined，不檢查其他虛假值，如 false、0 或 ''。

結論

理解 ?? 之間的差異和 || JavaScript 對於編寫健全且無錯誤的程式碼至關重要。雖然這兩個運算子都有助於提供後備值，但它們在處理虛假值時的行為有所不同。使用 ？ ？當您需要檢查 null 或未定義時，請使用 ||當您想檢查是否有虛假值時。

透過掌握這些運算符，您將能夠編寫更靈活、更準確的程式碼，其行為完全符合預期。

以上是別迷惑？與|| JavaScript：這就是它們的不同之處！的詳細內容。更多資訊請關注PHP中文網其他相關文章！