>[success] # ES11 -- 空值合并運算符（Nullish coalescing Operator） 1. 空值合并操作符'**??**' 和 "邏輯操作符 **||** 的區別，空值合并操作符只有當左面操作數為 **null 或者 undefined 時**，返回其**右側操作數**，否則返回**左側操作數**，邏輯操作符 **|| 是一個布爾邏輯運算符，左側的操作數會被強制轉換成布爾值用于求值**。任何假值 **（0， ''， NaN， null， undefined）** 都返回右側值 >[danger] ##### 案例 ~~~ 1.可以看出非null 或者 undefined 是不會影響到空值合并操作符的 ~~~ ~~~ let count = 0; let text = ""; let qty = count || 42; let message = text || "hi!"; console.log(qty); // 42 console.log(message); // "hi!" let qty1 = count ?? 42 let message1 = text ?? "hi!" console.log(qty1); // 0 console.log(message1); // 空字符 ~~~ * 案例 當返回值是null 或undefined 也會出現短路效果 ~~~ function A() { console.log('函數 A 被調用了'); return undefined; } function B() { console.log('函數 B 被調用了'); return false; } function C() { console.log('函數 C 被調用了'); return "foo"; } console.log( A() ?? C() ); // 依次打印 "函數 A 被調用了"、"函數 C 被調用了"、"foo" // 因為A返回了undefined 所以執行右側 console.log( B() ?? C() ); // 依次打印 "函數 B 被調用了"、"false" // 因為左側返回的是非undefined 和 null 因此只執行左側 ~~~ >[danger] ##### 注意 1. **將 ?? 直接與 AND（&&）和 OR（||）操作符組合使用是不可取的**。 ~~~ null || undefined ?? "foo"; // 拋出 SyntaxError true || undefined ?? "foo"; // 拋出 SyntaxError ~~~ >[success] # ES11 -- 可選鏈 Optional chaining ~~~ 1.當對象某個屬性不存時候，不會引起錯誤，該表達式短路返回值是 、 undefined。與函數調用一起使用時，如果給定的函數不存在，則返回 undefined 2.'obj.name?.age' 以這個案例說明，可選鏈保證的是'obj.name'這個值 既不是undefined 也不是null 的情況下才能調用name，如果是的話就返回 undefined· 3.'可選鏈與函數使用'，函數調用時如果被調用的方法不存在，使用可選鏈可 以使表達式自動返回undefined而不是拋出一個異常，但是如果存在卻不是 一個函數會報錯 let result = someInterface.customMethod?.(); 4.可選鏈不能進行賦值操作 let object = {}; object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment 5.'斷路計算'下面的例子如果左面操作是null 或者undefined 就形成斷路 后面的屬性也不會進行計算 let potentiallyNullObj = null; let x = 0; let prop = potentiallyNullObj?.[x++]; console.log(x); // x 將不會被遞增，依舊輸出 0 6.語法 obj?.prop obj?.[expr] arr?.[index] func?.(args) ~~~ >[danger] ##### 案例 ~~~ const adventurer = { name: 'Alice', cat: { name: 'Dinah' } }; const dogName = adventurer.dog?.name; console.log(dogName); // undefined console.log(adventurer.someNonExistentMethod?.()); // undefined function fn(callback){ return callback?.() // callback && callback() } ~~~ * 與空值合并操作符一起使用 ~~~ let customer = { name: "Carl", details: { age: 82 } }; let customerCity = customer?.city ?? "暗之城"; console.log(customerCity); // “暗之城” ~~~ >[danger] ##### 注意點 1. **可選鏈不能用于賦值** ~~~ let object = {}; object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment ~~~ >[success] # ES11 -- globalThis 1. **ES2020引入了globalThis對象**，它提供了跨環境訪問全局對象的標準方法中提出要提供全局變量，簡單說在瀏覽器中為`window`,在node環境中為`global`,但現在為統一目前已經指定了對應的標準，稱之為**globalThis** 2. 在不同js 環境中總是存在不同全局變量標準，往往在**瀏覽器**中**window**或者**frames**，在**WebWorkers**中**self**，在**Node**中**global** 3. 下面代碼在瀏覽器中打印你會得到**true** 4. 使用場景假設我們的環境是一個瀏覽器，我們將在這里使用 window。如果腳本可能在其他環境中運行，最好使用**globalThis** >[success] # ES11 -- BigInt 1. **`BigInt`**?是一種內置對象，它提供了一種方法來表示大于?`2的53次方?- 1`?的整數。這原本是 Javascript中可以用?`Number`?表示的最大數字。**`BigInt`**?可以表示任意大的整數。 2. 使用數字后面增加n ~~~ const bigInt = 9007199254740993n console.log(bigInt) console.log(typeof bigInt) // bigint // `BigInt`?和?[`Number`]不是嚴格相等的，但是寬松相等的。 console.log(1n == 1) // true console.log(1n === 1) // false // `Number`?和?`BigInt`?可以進行比較。 1n < 2 // true 2n > 1 // true ~~~ 3. 使用 BigInt 函數 ~~~ const bigIntNum = BigInt(9007199254740993n) console.log(bigIntNum) // 9007199254740993n ~~~ 4. 做運算，`BigInt`不能用于 `Math `對象中的方法；不能和任何 `Number`實例混合運算，兩者必須轉換成**同一種類型**。在兩種類型來回轉換時要小心，因為 `BigInt `變量在轉換成 `Number`變量時可能會丟失精度 ~~~ let number = BigInt(2); let a = number + 2n; // 4n let b = number * 10n; // 20n let c = number - 10n; // -8n console.log(a); console.log(b); console.log(c); ~~~ >[success] # ES11 -- String.prototype.matchAll() 1. **`matchAll()`**?方法返回一個包含所有匹配正則表達式的結果及分組捕獲組的迭代器。 ~~~ const regexp = /t(e)(st(\d?))/g; const str = 'test1test2'; const array = [...str.matchAll(regexp)]; console.log(array[0]); // ["test1", "e", "st1", "1"] console.log(array[1]); // ["test2", "e", "st2", "2"] ~~~ >[success] # ES11 -- Promise.allSettled() 1. **Promise.all()** 具有并發執行異步任務的能力。但它的最大問題就是如果其中某個任務出現異常(reject)，所有任務都會掛掉，**Promise直接進入reject 狀態** 2. **Promise.allSettled**，無論一個任務正常或者異常，都會返回對應的的狀態 ~~~ const promise1 = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve("promise1"); // reject("error promise1 "); }, 3000); }); }; const promise2 = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve("promise2"); // reject("error promise2 "); }, 1000); }); }; const promise3 = () => { return new Promise((resolve, reject) => { setTimeout(() => { // resolve("promise3"); reject("error promise3 "); }, 2000); }); }; // Promise.all 會走到catch里面 Promise.all([promise1(), promise2(), promise3()]) .then((res) => { console.log(res); }) .catch((error) => { console.log("error", error); // error promise3 }); // Promise.allSettled 不管有沒有錯誤，三個的狀態都會返回 Promise.allSettled([promise1(), promise2(), promise3()]) .then((res) => { console.log(res); // 打印結果 // [ // {status: 'fulfilled', value: 'promise1'}, // {status: 'fulfilled',value: 'promise2'}, // {status: 'rejected', reason: 'error promise3 '} // ] }) .catch((error) => { console.log("error", error); }); ~~~ >[success] # Dynamic Import（按需 import） 1. **import()** 可以在需要的時候，再加載某個模塊。 ~~~ button.addEventListener('click', event => { import('./dialogBox.js') .then(dialogBox => { dialogBox.open(); }) .catch(error => { /* Error handling */ }) }); ~~~