JavaScript ES12新特性有哪些

這篇文章主要介紹了JavaScript ES12新特性有哪些，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

而每年，JavaScript都會更新添加新的特性新標(biāo)準(zhǔn)，在今年ES2020發(fā)布了，而ES2020（ES12）也預(yù)計(jì)將在明年即2021年年中發(fā)布。每年的新特性都會經(jīng)歷四個階段，而第四階段也就是最后一個階段，本文即將介紹的即提案4中的相關(guān)新特性，也是意味著這些新特性將很大程度的出現(xiàn)在下一個版本中

特性搶先知：

• String.prototype.replaceAll 新增replaceAll
• Promise.any
• WeakRefs
• 邏輯運(yùn)算符和賦值表達(dá)式
• 數(shù)字分隔符號

replaceAll

看到replaceAll這個詞，相比很容易聯(lián)想到replace。在JavaScript中，replace方法只能是替換字符串中匹配到的第一個實(shí)例字符，而不能進(jìn)行全局多項(xiàng)匹配替換，唯一的辦法是通過正則表達(dá)式進(jìn)行相關(guān)規(guī)則匹配替換

而replaceAll則是返回一個全新的字符串，所有符合匹配規(guī)則的字符都將被替換掉，替換規(guī)則可以是字符串或者正則表達(dá)式。

let string = 'I like 前端,I like 前端公蝦米'//使用replacelet replaceStr = string.replace('like','love')console.log(replaceStr)  // 'I love 前端,I like 前端公蝦米'//replace使用正則匹配所有console.log(string.replace(/like/g,'love')) // 'I love 前端,I love 前端公蝦米'//使用replaceAlllet replaceAllStr = string.replaceAll('like','love')console.log(replaceAllStr) // 'I love 前端,I love 前端公蝦米'復(fù)制代碼

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

let string = 'I like 前端,I like 前端公蝦米'console.log(string.replaceAll(/like/,'love')) //TypeError復(fù)制代碼

Promise.any

當(dāng)Promise列表中的任意一個promise成功resolve則返回第一個resolve的結(jié)果狀態(tài) 如果所有的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(`輸出結(jié)果: ${value}`))
.catch (err => console.log(err))//輸出//輸出結(jié)果:哎呀，她接受我了復(fù)制代碼

再來看下另一種情況

Promise.any([  Promise.reject('Error 1'),  Promise.reject('Error 2'),  Promise.reject('Error 3')
])
.then(value => console.log(`請求結(jié)果: ${value}`))
.catch (err => console.log(err))//輸出AggregateError: All promises were rejected復(fù)制代碼

Promise.any與Promise.race十分容易混淆，務(wù)必注意區(qū)分，Promise.race 一旦某個promise觸發(fā)了resolve或者reject，就直接返回了該狀態(tài)結(jié)果，并不在乎其成功或者失敗

WeakRefs

使用WeakRefs的Class類創(chuàng)建對對象的弱引用(對對象的弱引用是指當(dāng)該對象應(yīng)該被GC回收時不會阻止GC的回收行為)

當(dāng)我們通過（const、let、var）創(chuàng)建一個變量時，垃圾收集器GC將永遠(yuǎn)不會從內(nèi)存中刪除該變量，只要它的引用仍然存在可訪問。WeakRef對象包含對對象的弱引用。對對象的弱引用是不會阻止垃圾收集器GC恢復(fù)該對象的引用，則GC可以在任何時候刪除它。

WeakRefs在很多情況下都很有用，比如使用Map對象來實(shí)現(xiàn)具有很多需要大量內(nèi)存的鍵值緩存，在這種情況下最方便的就是盡快釋放鍵值對占用的內(nèi)存。

目前，可以通過WeakMap()或者WeakSet()來使用WeakRefs

舉個栗子

我想要跟蹤特定的對象調(diào)用某一特定方法的次數(shù)，超過1000條則做對應(yīng)提示

let map = new Map()function doSomething(obj){
	...
}function useObject(obj){
	doSomething(obj)  
  let called = map.get(obj) || 0
  called ++ 
  
  if(called>1000){     console.log('當(dāng)前調(diào)用次數(shù)已經(jīng)超過1000次了，over')
  }
  
  map.set(obj, called)
}復(fù)制代碼

如上雖然可以實(shí)現(xiàn)我們的功能，但是會發(fā)生內(nèi)存溢出,因?yàn)閭鬟f給doSomething函數(shù)的每個對象都永久保存在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('當(dāng)前調(diào)用次數(shù)已經(jīng)超過1000次了，over')
  }
  
  wmap.set(obj, called)
}復(fù)制代碼

因?yàn)槭侨跻?，所以WeakMap、WeakSet的鍵值對是不可枚舉的

WeakSet和WeakMap相似，但是每個對象在WeakSet中的每個對象只可能出現(xiàn)一次，WeakSet中所有對象都是唯一的

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

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

ws.has(foo) //truews.has(bar) //truews.delete(foo) //刪除foo對象ws.has(foo) //false 已刪除ws.has(bar) //仍存在復(fù)制代碼

WeakSet與Set相比有以下兩個區(qū)別

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

最后，WeakRef實(shí)例有一個方法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;
};復(fù)制代碼

對于緩存遠(yuǎn)程數(shù)據(jù)來說，這可能不是一個好主意，因?yàn)檫h(yuǎn)程數(shù)據(jù)可能會不可預(yù)測地從內(nèi)存中刪除。在這種情況下，最好使用LRU之類的緩存。

邏輯運(yùn)算符和賦值表達(dá)式

邏輯運(yùn)算符和賦值表達(dá)式，新特性結(jié)合了邏輯運(yùn)算符（&&，||，??）和賦值表達(dá)式而JavaScript已存在的 復(fù)合賦值運(yùn)算符有：

• 操作運(yùn)算符：+=   -=   *=   /=   %=   **=
• 位操作運(yùn)算符：&=   ^=   |=
• 按位運(yùn)算符：<<=   >>=   >>>=

現(xiàn)有的的運(yùn)算符，其工作方式都可以如此來理解

表達(dá)式：a op= b

等同于：a = a op b

邏輯運(yùn)算符和其他的復(fù)合賦值運(yùn)算符工作方式不同

表達(dá)式：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)復(fù)制代碼

為什么不再是跟以前的運(yùn)算公式a = a op b一樣呢，而是采用a = a op (a = b)。因?yàn)楹笳?em>當(dāng)且僅當(dāng)a的值為false的時候才計(jì)算賦值，只有在必要的時候才執(zhí)行分配，而前者的表達(dá)式總是執(zhí)行賦值操作

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

const pages = [
  {  	title:'主會場',    path:'/'
  },
  {    path:'/other'
  },
  ...
]  
for (const page of pages){
	page.title ??= '默認(rèn)標(biāo)題'}console.table(pages)//(index)  title       		path//0        "主會場"   	  "/"//1        "默認(rèn)標(biāo)題"  	 "/other"復(fù)制代碼

小結(jié)：

• &&=：當(dāng)LHS值存在時，將RHS變量賦值給LHS
• ||=：當(dāng)LHS值不存在時，將RHS變量賦值給LHS
• ??= ：當(dāng)LHS值為null或者undefined時，將RHS變量賦值給LHS

數(shù)字分隔符

數(shù)字分隔符，可以在數(shù)字之間創(chuàng)建可視化分隔符，通過_下劃線來分割數(shù)字，使數(shù)字更具可讀性

const money = 1_000_000_000//等價于const money = 1000000000const totalFee = 1000.12_34//等價于const totalFee = 1000.1234復(fù)制代碼

該新特性同樣支持在八進(jìn)制數(shù)中使用

const number = 0o123_456//等價于const number = 0o123456復(fù)制代碼

該新特性方便讀取數(shù)據(jù)，可以讓我們打工人更容易辨認(rèn)"資產(chǎn)" 不過話說回來，小編的資產(chǎn)好像不配使用該特性...敲重點(diǎn)?。。?/p>

本次所有新特性均介紹的第4階段，意味著將出現(xiàn)在下一個版本中的，沒有介紹階段3的，因?yàn)椴淮_定是否一定會出現(xiàn)在下個版本中。本文介紹的新特性均可直接在最新版的谷歌瀏覽器中愉快體驗(yàn)。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享JavaScript ES12新特性有哪些內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!