目前工作中是多人協作的項目，有時候交叉幫忙所以看過很多很多人的代碼了，感覺很少看到有人用這幾個邏輯運算符，但這幾個邏輯運算符出來也挺久了，總得認識認識，下面一個個舉例說明一下具體用法熟悉一下。

一、可選鏈接 (?.)

簡單介紹：如果引用為空，依然可以正常訪問嵌套的屬性，并不會出現錯誤。即 ?.運算符的功能與 . 鏈接運算符的區別在于，如果引用為空或者未定義（null 或 undefined），則表達式會短路并且返回未定義的值，而不會直接報錯。

代碼示例：

javascript
體驗AI代碼助手
代碼解讀
復制代碼
let user = {  
  name: "天天鴨",  
  address: {  
    city: "廣州"  
  }  
};  
  
console.log(user.address.city); // 廣州
  
let user2 = {  
  name: "天天鴨"  
};  
  
console.log(user2.address?.city); //  undefined

在上述示例中，由于 user2 沒有 address 屬性，所以如果使用 user2.address.city 訪問通常會報錯 TypeError....。但是通過使用可選鏈接運算符 (?.)，JavaScript 只會返回 undefined 而不是拋出錯誤。

注意：

• ?.只會檢查右側的屬性是否為 null 或 undefined，如果右側的操作數是一個空對象 {}，那么它會繼續執行后續的屬性訪問或方法調用。
• 如果在訪問屬性或調用方法的過程中遇到 null 或 undefined，那么整個表達式的結果都會是 undefined。

二、空合并運算符 (??)

簡單介紹：空合并運算符 (??) 邏輯運算符，當左側內容為 null 或 undefined 時，它會返回右側內容，否則返回其左側內容。當想要值可能為 null 或undefined的變量提供默認值時，這會很實用。

代碼示例：

ini
體驗AI代碼助手
代碼解讀
復制代碼
let name = null;  

let defaultName = "天天鴨";  
  
let result = name ?? defaultName;  
  
console.log(result); // 天天鴨

在上述示例中，由于 name 為 null，因此合并運算符返回 defaultName，因此起到默認值效果。 但如果 name 不為 null 或undefined，則會返回下面例子該值：

ini
體驗AI代碼助手
代碼解讀
復制代碼
let name = "我是name";  

let defaultName = "天天鴨";  
  
let result = name ?? defaultName;  
  
console.log(result); // 我是name

注意：

• ?? 操作符只在左側操作數為 null 或 undefined 時才返回右側操作數，如果想要區分 null/undefined 與其他假值（如0、''、false）的場景特別有用。
• 注意與邏輯或 (||)的區別：如果左側操作數是任何假值（false, 0, NaN, null, undefined, ""），則返回右側操作數。而且??只會識別 null 或 undefined。

三、空值合并賦值操作符 (??=)

簡單介紹：空值合并賦值操作符(??=)結合了空值合并操作符和賦值操作符功能，一般用于將默認值分配給變量，但僅只有變量的值為 null 或 undefined 時才行。

代碼示例：

ini
體驗AI代碼助手
代碼解讀
復制代碼
let name = null;
let age = undefined;
let count = 0;

name ??= 'default'; // 'default'，因為 name 是 null
age ??= 'default'; // 'default'，因為 age 是 undefined
count ??= 'default'; // 0， 因為 count 的初始值不是 null 或 undefined

當變量沒有被賦值或被賦值為 null 或 undefined 時，則會將默認值分配給變量。

注意：

• 如果變量已經是某個假值（如 false、0 或 ''），??= 不會改變它的值

四、轉換為布爾值 (!!)

簡單介紹：!! 運算符用于將值轉換為布爾值。第一個 ！否定該值，將其轉換為布爾值并將其反轉，第二個 ! 將其反轉回其原始布爾值。

代碼示例：

ini
體驗AI代碼助手
代碼解讀
復制代碼
let value = "天天鴨";
let yValue = "";

console.log(!!value); // true
console.log(!!yValue); // false

上述示例中，value 是一個非空字符串，在 JavaScript 中被視為 true 值，因此 !!value 返回 true。另一方面， yValue 是一個空字符串，在 JavaScript 中被視為 false 值，因此 !!yValue 返回 false。

小結：

這些比較新的邏輯運算符基本都是在 ECMAScript 2020 標準中引入的，總結下來就會發現主要是針對null 或和undefined的，可能很多人平時都不習慣去使用，但不喜歡用起碼要懂啊，所以才分享出來，大佬們如果有什么建議也歡迎指導哈。