ES12 -- 新特性 · 前端知識 -- 學習整理

>[success] # ES12 -- 數字分隔符 -- Numeric literal separator 1. 為了提高大數字的可讀性，現在可以用`_`作為數字的分隔符： ~~~ const num = 1_000_000_000 // 1000000000 // 小數 0.000_001 // 科學計數法 1e10_000 ~~~ 2. 數值分隔符有幾個使用注意點。 * 不能放在數值的最前面（leading）或最后面（trailing）。 * 不能兩個或兩個以上的分隔符連在一起。 * 小數點的前后不能有分隔符。 * 科學計數法里面，表示指數的`e`或`E`前后不能有分隔符。下面的寫法都會報錯。 ~~~js // 全部報錯 3_.141 3._141 1_e12 1e_12 123__456 _1464301 1464301_ ~~~ >[success] # 邏輯運算符和賦值表達式（&&=，||=，??=） 1. 邏輯與賦值 **x &&= y**等效于 **x && (x = y)**; ~~~ let a = 1 let b = 0 a &&= 2 // a && a = 2 console.log(a) // 2 b &&= 2 // b && b=2 console.log(b) // 0 ~~~ 2. 邏輯或賦值（`x ||= y`）運算僅在?`x`?為false時賦值。`x ||= y`?等同于：**x || (x = y);** ~~~ const a = { duration: 50, title: '' } a.duration ||= 10 // a.duration || a.duration = 10 console.log(a.duration) // 50 a.title ||= 'title is empty.' // a.title || a.title ='title is empty.' console.log(a.title) // "title is empty" ~~~ 3. 邏輯空賦值運算符?(`x ??= y`) 僅在?`x`?是??(`null`?或?`undefined`) 時對其賦值。8**`x ??= y`?等價于： x ?? (x = y);** ~~~ function config(options) { options.duration ??= 100; options.speed ??= 25; return options; } config({ duration: 125 }); // { duration: 125, speed: 25 } config({}); // { duration: 100, speed: 25 } const a = { duration: 50 }; a.duration ??= 10; console.log(a.duration); // 50 a.speed ??= 25; console.log(a.speed); // 25 ~~~ >[success] # ES12 -- String.prototype.replaceAll() 1. replaceAll() 方法返回一個新字符串 ~~~ 'aabbcc'.replaceAll('b', '.'); // 'aa..cc' ~~~ >[success] # ES12 -- Promise.any 1. **Promise.any()** 可用于以并行和競爭方式執行獨立的異步操作，以獲取任何第一個完成的 promise 的值。**簡單的說返回最先成功狀態的promise** 2. 當遇到失敗時候就是Promise.any()不會因為某個 Promise 變成rejected狀態而結束，必須等到所有參數 Promise 變成rejected狀態才會結束，當然期間有一個成功的也結束 ~~~ 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.any([promise1(), promise2(), promise3()]) .then((first) => { // 只要有一個請求成功就會返回第一個請求成功的 console.log(first); // 會返回promise2 }) .catch((error) => { // 所有三個全部請求失敗才會來到這里 console.log("error", error); }); ~~~ >[success] # ES12 -- FinalizationRegistry 1. `FinalizationRegistry `提供了這樣的一種方法：當一個在注冊表中注冊的對象被回收時，請求在某個時間點上調用一個清理回調。（清理回調有時被稱為 finalizer ） 2. 通過調用register方法，注冊任何你想要清理回調的對象，傳入該對象和所含的值 >[danger] ##### 案例 * 下面 obj1 obj2 obj3 即使被賦值為null 但是因為arr 一直在引用所以一直沒有進入`FinalizationRegistry ` 回調中 ~~~ const register = new FinalizationRegistry((value) => { console.log('銷毀回調' + value) }) // 1.Weak Reference(弱引用)和Strong Reference(強引用) let obj1 = { name: '123' } let obj2 = { name: 'kobe' } let obj3 = { name: 'jame' } register.register(obj1, '銷毀標記') let arr = [obj1, obj2, obj3] obj1 = null obj2 = null obj3 = null ~~~ * 在一段時間后打印了信息**銷毀回調銷毀標記** ，因為WeakSet是弱引用如果被銷毀就跟著一起清空 ~~~ let obj1 = { name: '123' } let obj2 = { name: 'kobe' } let obj3 = { name: 'jame' } register.register(obj1, '銷毀標記') const set = new WeakSet() set.add(obj1) set.add(obj2) set.add(obj3) obj1 = null obj2 = null obj3 = null ~~~ >[success] # ES12 -- WeakRefs 1. 如果我們希望是一個弱引用的話，可以使用WeakRef 2. 通過new WeakRefs 包裹弱引用對象創建，想獲取弱引用包裹對象值需要**deref**調用 ~~~ const myWeakRef = new WeakRef({ name: '123', year: '25' }) myWeakRef.deref() // => { name: '123', year: '25' } myWeakRef.deref().name // => '123' ~~~ >[danger] ##### 案例 * 沒有使用弱引用此時因為b 引用了a 不會觸發FinalizationRegistry銷毀 ~~~ const r = new FinalizationRegistry((val) => { console.log('銷毀') }) let a = { name: 1 } const b = a r.register(a) a = null ~~~ * 使用了弱引用此時會觸發`FinalizationRegistry` ~~~ const r = new FinalizationRegistry((val) => { console.log('銷毀') }) let a = { name: 1 } const b = new WeakRef(a) r.register(a) a = null ~~~ * 注說明 **myWeakRef** mdn 不建議使用 [mdn WeakRef](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakRef)