JavaScript ES12有哪些新特性

本篇文章給大家分享的是有關JavaScript ES12有哪些新特性，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

而每年，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  //等價于  aa = a || (a = b)  a &&= b  //等價于  aa = a && (a = b)  a ??= b  //等價于  aa = 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的，因為不確定是否一定會出現在下個版本中。

以上就是JavaScript ES12有哪些新特性，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。