JavaScript ES12新特性搶先體驗

在上一篇文章中，咱們介紹了ES2020的相關九大特性，裏面很多實用的新特性讓咱們受益良多。
ES11屢試不爽的新特性，你用上了幾個？

而每一年，JavaScript都會更新添加新的特性新標準，在今年ES2020發佈了，而ES2020（ES12）也預計將在明年即2021年年中發佈。每一年的新特性都會經歷四個階段，而第四階段也就是最後一個階段，本文即將介紹的即提案4中的相關新特性，也是意味着這些新特性將很大程度的出如今下一個版本中

特性搶先知：

• String.prototype.replaceAll 新增replaceAll
• Promise.any
• WeakRefs
• 邏輯運算符和賦值表達式
• 數字分隔符號

replaceAll

看到replaceAll這個詞，相比很容易聯想到replace。在JavaScript中，replace方法只能是替換字符串中匹配到的第一個實例字符，而不能進行全局多項匹配替換，惟一的辦法是經過正則表達式進行相關規則匹配替換

而replaceAll則是返回一個全新的字符串，全部符合匹配規則的字符都將被替換掉，替換規則能夠是字符串或者正則表達式。

let string = 'I like 前端,I like 前端公蝦米'

//使用replace
let replaceStr = string.replace('like','love')
console.log(replaceStr)  // 'I love 前端,I like 前端公蝦米'

//replace使用正則匹配全部
console.log(string.replace(/like/g,'love')) // 'I love 前端,I love 前端公蝦米'

//使用replaceAll
let replaceAllStr = string.replaceAll('like','love')
console.log(replaceAllStr) // 'I love 前端,I love 前端公蝦米'

須要注意的是，replaceAll在使用正則表達式的時候，若是非全局匹配（/g），則replaceAll()會拋出一個異常

let string = 'I like 前端,I like 前端公蝦米'
console.log(string.replaceAll(/like/,'love')) //TypeError

Promise.any

當Promise列表中的 任意一個promise成功resolve則 返回第一個resolve的結果狀態
若是 全部的promise均 reject，則拋出異常表示全部請求失敗

Promise.any([
  new Promise((resolve, reject) => setTimeout(reject, 500, '哎呀，我被拒絕了')),
  new Promise((resolve, reject) => setTimeout(resolve, 1000, '哎呀，她接受我了')),
  new Promise((resolve, reject) => setTimeout(resolve, 2000, '哎呀，她也接受我了')),
])
.then(value => console.log(`輸出結果: ${value}`))
.catch (err => console.log(err))

//輸出
//輸出結果:哎呀，她接受我了

再來看下另外一種狀況

Promise.any([
  Promise.reject('Error 1'),
  Promise.reject('Error 2'),
  Promise.reject('Error 3')
])
.then(value => console.log(`請求結果: ${value}`))
.catch (err => console.log(err))

//輸出
AggregateError: All promises were rejected

Promise.any與Promise.race十分容易混淆，務必注意區分，Promise.race 一旦某個promise觸發了resolve或者reject，就直接返回了該狀態結果，並不在意其成功或者失敗

WeakRefs

使用WeakRefs的Class類建立對對象的弱引用(對對象的弱引用是指當該對象應該被GC回收時不會阻止GC的回收行爲)

當咱們經過（const、let、var）建立一個變量時，垃圾收集器GC將永遠不會從內存中刪除該變量，只要它的引用仍然存在可訪問。WeakRef對象包含對對象的弱引用。對對象的弱引用是不會阻止垃圾收集器GC恢復該對象的引用，則GC能夠在任什麼時候候刪除它。

WeakRefs在不少狀況下都頗有用，好比使用Map對象來實現具備不少須要大量內存的鍵值緩存，在這種狀況下最方便的就是儘快釋放鍵值對佔用的內存。

目前，能夠經過WeakMap()或者WeakSet()來使用WeakRefs

舉個栗子

我想要跟蹤特定的對象調用某一特定方法的次數，超過1000條則作對應提示

let map = new Map()
function doSomething(obj){
    ...
}
function useObject(obj){
    doSomething(obj)
  
  let called = map.get(obj) || 0
  called ++ 
  
  if(called>1000){
     console.log('當前調用次數已經超過1000次了，over')
  }
  
  map.set(obj, called)
}

如上雖然能夠實現咱們的功能，可是會發生內存溢出,由於傳遞給doSomething函數的每一個對象都永久保存在map中，而且不會被GC回收，所以咱們可使用WeakMap

let wmap = new WeakMap()
function doSomething(obj){
    ...
}
function useObject(obj){
    doSomething(obj)
  
  let called = wmap.get(obj) || 0
  
  called ++
  
  if(called>1000){
     console.log('當前調用次數已經超過1000次了，over')
  }
  
  wmap.set(obj, called)
}

由於是弱引用，因此WeakMap、WeakSet的鍵值對是不可枚舉的

WeakSet和WeakMap類似，可是每一個對象在WeakSet中的每一個對象只可能出現一次，WeakSet中全部對象都是惟一的

let ws = new WeakSet()
let foo = {}
let bar = {}

ws.add(foo)
ws.add(bar)

ws.has(foo) //true
ws.has(bar) //true

ws.delete(foo) //刪除foo對象
ws.has(foo) //false 已刪除
ws.has(bar) //仍存在

WeakSet與Set相比有如下兩個區別

• WeakSet只能是對象集合，而不能是任何類型的任意值
• WeakSet弱引用，集合中對象引用爲弱引用，若是沒有其餘對WeakSet對象的引用，則會被GC回收

最後，WeakRef實例有一個方法deref，返回引用的原始對象，若是原始對象被回收，則返回undefined

const cache = new Map();

const setValue =  (key, obj) => {
  cache.set(key, new WeakRef(obj));
};

const getValue = (key) => {
  const ref = cache.get(key);
  if (ref) {
    return ref.deref();
  }
};

const fibonacciCached = (number) => {
  const cached = getValue(number);
  if (cached) return cached;
  const sum = calculateFibonacci(number);
  setValue(number, sum);
  return sum;
};

對於緩存遠程數據來講，這可能不是一個好主意，由於遠程數據可能會不可預測地從內存中刪除。在這種狀況下，最好使用LRU之類的緩存。

邏輯運算符和賦值表達式

邏輯運算符和賦值表達式，新特性結合了邏輯運算符（&&，||，??）和賦值表達式而JavaScript已存在的
複合賦值運算符有：

• 操做運算符：+= -= = /= %= *=
• 位操做運算符：&= ^= |=
• 按位運算符：<<= >>= >>>=

現有的的運算符，其工做方式均可以如此來理解

表達式：a op= b

等同於：a = a op b

邏輯運算符和其餘的複合賦值運算符工做方式不一樣

表達式：a op= b

等同於：a = a op (a = b)

a ||= b
//等價於
a = a || (a = b)

a &&= b
//等價於
a = a && (a = b)

a ??= b
//等價於
a = a ?? (a = b)

爲何再也不是跟之前的運算公式a = a op b同樣呢，而是採用a = a op (a = b)。由於後者當且僅當a的值爲false的時候才計算賦值，只有在必要的時候才執行分配，而前者的表達式老是執行賦值操做

??=可用來補充/初始化缺失的屬性

const pages = [
  {
      title:'主會場',
    path:'/'
  },
  {
    path:'/other'
  },
  ...
]
  
for (const page of pages){
    page.title ??= '默認標題'
}
console.table(pages)
//(index)  title               path
//0        "主會場"         "/"
//1        "默認標題"       "/other"

小結：

• &&=：當LHS值存在時，將RHS變量賦值給LHS
• ||=：當LHS值不存在時，將RHS變量賦值給LHS
• ??= ：當LHS值爲null或者undefined時，將RHS變量賦值給LHS

數字分隔符

數字分隔符，能夠在數字之間建立可視化分隔符，經過_下劃線來分割數字，使數字更具可讀性

const money = 1_000_000_000
//等價於
const money = 1000000000

const totalFee = 1000.12_34
//等價於
const totalFee = 1000.1234

該新特性一樣支持在八進制數中使用

const number = 0o123_456
//等價於
const number = 0o123456

該新特性方便讀取數據，可讓咱們打工人更容易辨認"資產"
不過話說回來，小編的資產好像不配使用該特性...敲重點！！！

本次全部新特性均介紹的第4階段，意味着將出如今下一個版本中的，沒有介紹階段3的，由於不肯定是否必定會出如今下個版本中。本文介紹的新特性都可直接在最新版的谷歌瀏覽器中愉快體驗。

本文首發公號【前端公蝦米】，若有錯誤，還望聯繫我指出【y3517320520】