首頁 > web前端 > js教程 > JavaScript 中的空合併運算子`??`

JavaScript 中的空合併運算子`??`

Barbara Streisand
發布: 2024-09-19 16:31:09
原創
567 人瀏覽過

Nullish Coalescing Operator `??` in JavaScript

在本部落格中,我們將探索 JavaScript 中的空合併運算子 ??。我們將其與邏輯 OR 運算符 || 進行比較,討論其優先級,並提供實際範例來幫助您理解其用法。讓我們潛入吧!

空值合併運算子??

空值合併運算子 ?? 用於處理 nullundefined 時提供預設值。當左側運算元為 nullundefined 時,它會傳回右側運算元。否則,它會傳回左側操作數。

文法:

result = value1 ?? value2;

登入後複製

範例:

let user = null;
let defaultUser = "Guest";

let currentUser = user ?? defaultUser;
console.log(currentUser); // Output: "Guest"

登入後複製

說明:

  • 使用者 為
  • ?? 運算子回傳 defaultUser,因為 usernull

與 || 比較

邏輯或運算子||傳回它遇到的第一個真值。這表示如果左運算元為假,它將傳回右邊操作數(false, 0, "", null未定義NaN)。

範例:

let user = "";
let defaultUser = "Guest";

let currentUser = user || defaultUser;
console.log(currentUser); // Output: "Guest"

登入後複製

說明:

  • user 是一個空字串 ""(假)。
  • || 運算子回傳 defaultUser,因為 user 為假。

主要差異

  • ??:僅將 null未定義 視為虛假值。
  • ||:考慮所有假值(false0""null"null,
  • null
,未定義

NaN)。

let user = 0;
let defaultUser = "Guest";

let currentUser1 = user ?? defaultUser;
let currentUser2 = user || defaultUser;

console.log(currentUser1); // Output: 0
console.log(currentUser2); // Output: "Guest"

登入後複製

範例:

  • 說明: 使用者0
  • (對於
  • || 為假,但對於 ?? 則不然)。 ?? 運算子回傳 0,因為 user
  • 不為 
  • null 或 未定義null 或 未定義null
  •  或
未定義

||

 運算子回傳「Guest」,因為使用者是假的。 優先權

空合併運算子 ??
的優先權低於大多數其他運算符,包括邏輯 OR 運算子

||
let a = null;
let b = false;
let c = "Hello";

let result1 = a ?? b || c;
let result2 = a || b ?? c;

console.log(result1); // Output: "Hello"
console.log(result2); // Output: "Hello"

登入後複製
。這表示涉及

?? 的表達式在涉及 ||

.
    的表達式之後求值
  • 範例: 說明: 一個?? b
  •  回傳
  • false,因為anull,且b
  • 🎜>。
  • 假|| c 回傳「Hello」,因為false是假,而c是真。 一個|| b
  •  回傳
  • false,因為anull,且bfalse
假的? ? c

 回傳「Hello」,因為

false

 不是

null

未定義

function getUserName(user) {
  return user.name ?? "Guest";
}

let user1 = { name: "Alice" };
let user2 = { age: 25 };

console.log(getUserName(user1)); // Output: "Alice"
console.log(getUserName(user2)); // Output: "Guest"

登入後複製

實際範例

    讓我們用一些實際範例將所有內容放在一起:
  • 使用?? 對於預設值 說明:
  • 如果
user.name

 為null

未定義
function getUserName(user) {
  return user.name || "Guest";
}

let user1 = { name: "" };
let user2 = { age: 25 };

console.log(getUserName(user1)); // Output: "Guest"
console.log(getUserName(user2)); // Output: "Guest"

登入後複製
,則

??操作符返回“Guest”

. 使用|| 對於預設值 說明:
  • 如果 user.name 為假(例如,""),則 || 運算子回傳 「Guest」

總結

  • ?? (空白合併運算子):若左側運算元為 null未定義,則傳回右邊運算元。
  • || (邏輯或運算子):傳回遇到的第一個真值。
  • 優先權?? 運算子的優先權低於 || 運算子。

結論

空值合併運算子 ?? 是 JavaScript 中的強大工具,用於在處理 nullundefined 時提供預設值。透過了解它與邏輯 OR 運算子 || 的區別及其優先級,您將能夠編寫更健壯且無錯誤的程式碼。不斷練習和探索,加深對 JavaScript 中 nullish 合併運算子的理解。

請繼續關注更多關於 JavaScript 的深入部落格!快樂編碼!

以上是JavaScript 中的空合併運算子`??`的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板