一些比較新的運算子

??

該操作符算是||的加強版，它也和|| &&兩個操作符一起被歸為二元邏輯運算子，||只會在左邊的值為假值時返回右邊的值，而??是在左邊的值為undefined或者null時才會返回右邊的值，簡單來說??是判斷有沒有值，||是判斷真假。

這個操作符在根據物件的屬性設定值時就很好用：

const test = {
    a: 0,
};
const data = { a: test.a ?? "aaa", b: test.b ?? "bbb" };
console.log(data); // a:0 b:"bbb"

??=

既然帶個等號當然是和賦值有關係了，這個操作符首先會對左邊的值進行一次??

a ??= b  等價於  a ?? (a = b)  // a為空時賦值 

&&= ||=

這兩個操作符也和??=相似

a &&= b  等價於  a && (a = b)  // a為真時賦值
a ||= b  等價於  a || (a = b)  // a為假時賦值

?.

這個操作符叫做可選鏈操作符，是訪問物件屬性.的升級版，可以在訪問屬性時先隱式地判斷儲存該屬性的物件是否存在，如果不存在會返回undefined，如果存在會返回該屬性對應的值。

const test = {
    a: {
        aa: "aa",
    },
    c() {
        return "i am c";
    },
};
let hh = null;
console.log(hh?.a); // undefined hh為undefined或null都會返回undefined 這裡用了null
console.log(test.a?.aa); // aa
console.log(test.b?.bb); // undefined test.b為undefined
 

該操作符能通過在屬性後新增?.()的形式執行方法，同樣會先檢測該方法是否存在，如果對一個非方法的屬性運用，會報錯

console.log(test.c?.()); // i am c
console.log(test.d?.()); // undefined
// console.log(test.a?.()); // 報錯

該操作符還能使用方括號的形式對屬性進行訪問

let str = "aa";
console.log(test.a?.[str]); //aa
console.log(test.a?.["xxx"]); // undefined