日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
JavaScriptES12新特性搶先體驗(yàn)

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

成都創(chuàng)新互聯(lián)成立以來不斷整合自身及行業(yè)資源、不斷突破觀念以使企業(yè)策略得到完善和成熟，建立了一套“以技術(shù)為基點(diǎn)，以客戶需求中心、市場(chǎng)為導(dǎo)向”的快速反應(yīng)體系。對(duì)公司的主營(yíng)項(xiàng)目，如中高端企業(yè)網(wǎng)站企劃 / 設(shè)計(jì)、行業(yè) / 企業(yè)門戶設(shè)計(jì)推廣、行業(yè)門戶平臺(tái)運(yùn)營(yíng)、成都App定制開發(fā)、移動(dòng)網(wǎng)站建設(shè)、微信網(wǎng)站制作、軟件開發(fā)、綿陽電信機(jī)房機(jī)柜租用等實(shí)行標(biāo)準(zhǔn)化操作，讓客戶可以直觀的預(yù)知到從成都創(chuàng)新互聯(lián)可以獲得的服務(wù)效果。

特性搶先知：

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

replaceAll

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

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

 
 
 
    
  
  
  
  1. let string = 'I like 前端,I like 前端公蝦米' 
    2. 
  
  
  
  2. //使用replace 
    3. 
  
  
  
  3. let replaceStr = string.replace('like','love') 
    4. 
  
  
  
  4. console.log(replaceStr)  // 'I love 前端,I like 前端公蝦米' 
    5. 
  
  
  
  5. //replace使用正則匹配所有 
    6. 
  
  
  
  6. console.log(string.replace(/like/g,'love')) // 'I love 前端,I love 前端公蝦米' 
    7. 
  
  
  
  7. //使用replaceAll 
    8. 
  
  
  
  8. let replaceAllStr = string.replaceAll('like','love') 
    9. 
  
  
  
  9. console.log(replaceAllStr) // 'I love 前端,I love 前端公蝦米'
    10.

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

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

Promise.any

當(dāng)Promise列表中的任意一個(gè)promise成功resolve則返回第一個(gè)resolve的結(jié)果狀態(tài) 如果所有的promise均reject，則拋出異常表示所有請(qǐng)求失敗

 
 
 
    
  
  
  
  1. Promise.any([ 
    2. 
  
  
  
  2.   new Promise((resolve, reject) => setTimeout(reject, 500, '哎呀，我被拒絕了')), 
    3. 
  
  
  
  3.   new Promise((resolve, reject) => setTimeout(resolve, 1000, '哎呀，她接受我了')), 
    4. 
  
  
  
  4.   new Promise((resolve, reject) => setTimeout(resolve, 2000, '哎呀，她也接受我了')),
    5. 
  
  
  
  5. ]) 
    6. 
  
  
  
  6. .then(value => console.log(`輸出結(jié)果: ${value}`)) 
    7. 
  
  
  
  7. .catch (err => console.log(err)) 
    8. 
  
  
  
  8. //輸出 
    9. 
  
  
  
  9. //輸出結(jié)果:哎呀，她接受我了
    10.

再來看下另一種情況

 
 
 
    
  
  
  
  1. Promise.any([ 
    2. 
  
  
  
  2.   Promise.reject('Error 1'), 
    3. 
  
  
  
  3.   Promise.reject('Error 2'), 
    4. 
  
  
  
  4.   Promise.reject('Error 3') 
    5. 
  
  
  
  5. ]) 
    6. 
  
  
  
  6. .then(value => console.log(`請(qǐng)求結(jié)果: ${value}`)) 
    7. 
  
  
  
  7. .catch (err => console.log(err)) 
    8. 
  
  
  
  8. //輸出 
    9. 
  
  
  
  9. AggregateError: All promises were rejected
    10.

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

WeakRefs

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

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

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

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

舉個(gè)栗子

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

 
 
 
    
  
  
  
  1. let map = new Map() 
    2. 
  
  
  
  2. function doSomething(obj){ 
    3. 
  
  
  
  3.  ... 
    4. 
  
  
  
  4. } 
    5. 
  
  
  
  5. function useObject(obj){ 
    6. 
  
  
  
  6.  doSomething(obj) 
    7. 
  
  
  
  7.   let called = map.get(obj) || 0 
    8. 
  
  
  
  8.   called ++  
    9. 
  
  
  
  9.   if(called>1000){
    10. 
  
  
  
  10.       console.log('當(dāng)前調(diào)用次數(shù)已經(jīng)超過1000次了，over') 
    11. 
  
  
  
  11.   } 
    12. 
  
  
  
  12.   map.set(obj, called) 
    13. 
  
  
  
  13. }
    14.

如上雖然可以實(shí)現(xiàn)我們的功能，但是會(huì)發(fā)生內(nèi)存溢出,因?yàn)閭鬟f給doSomething函數(shù)的每個(gè)對(duì)象都永久保存在map中，并且不會(huì)被GC回收，因此我們可以使用WeakMap

 
 
 
    
  
  
  
  1. let wmap = new WeakMap() 
    2. 
  
  
  
  2. function doSomething(obj){ 
    3. 
  
  
  
  3.  ... 
    4. 
  
  
  
  4. } 
    5. 
  
  
  
  5. function useObject(obj){ 
    6. 
  
  
  
  6.  doSomething(obj) 
    7. 
  
  
  
  7.   let called = wmap.get(obj) || 0 
    8. 
  
  
  
  8.   called ++ 
    9. 
  
  
  
  9.   if(called>1000){ 
    10. 
  
  
  
  10.      console.log('當(dāng)前調(diào)用次數(shù)已經(jīng)超過1000次了，over') 
    11. 
  
  
  
  11.   } 
    12. 
  
  
  
  12.   wmap.set(obj, called) 
    13. 
  
  
  
  13. }
    14.

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

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

 
 
 
    
  
  
  
  1. let ws = new WeakSet() 
    2. 
  
  
  
  2. let foo = {} 
    3. 
  
  
  
  3. let bar = {} 
    4. 
  
  
  
  4. ws.add(foo) 
    5. 
  
  
  
  5. ws.add(bar) 
    6. 
  
  
  
  6. ws.has(foo) //true 
    7. 
  
  
  
  7. ws.has(bar) //true 
    8. 
  
  
  
  8. ws.delete(foo) //刪除foo對(duì)象 
    9. 
  
  
  
  9. ws.has(foo) //false 已刪除 
    10. 
  
  
  
  10. ws.has(bar) //仍存在
    11.

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

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

最后，WeakRef實(shí)例有一個(gè)方法deref，返回引用的原始對(duì)象，如果原始對(duì)象被回收，則返回undefined

 
 
 
    
  
  
  
  1. const cache = new Map(); 
    2. 
  
  
  
  2. const setValue =  (key, obj) => { 
    3. 
  
  
  
  3.   cache.set(key, new WeakRef(obj)); 
    4. 
  
  
  
  4. }; 
    5. 
  
  
  
  5. const getValue = (key) => { 
    6. 
  
  
  
  6.   const ref = cache.get(key); 
    7. 
  
  
  
  7.   if (ref) { 
    8. 
  
  
  
  8.     return ref.deref(); 
    9. 
  
  
  
  9.   } 
    10. 
  
  
  
  10. }; 
    11. 
  
  
  
  11. const fibonacciCached = (number) => { 
    12. 
  
  
  
  12.   const cached = getValue(number); 
    13. 
  
  
  
  13.   if (cached) return cached; 
    14. 
  
  
  
  14.   const sum = calculateFibonacci(number); 
    15. 
  
  
  
  15.   setValue(number, sum); 
    16. 
  
  
  
  16.   return sum; 
    17. 
  
  
  
  17. };
    18.

對(duì)于緩存遠(yuǎn)程數(shù)據(jù)來說，這可能不是一個(gè)好主意，因?yàn)檫h(yuǎn)程數(shù)據(jù)可能會(huì)不可預(yù)測(cè)地從內(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)

 
 
 
    
  
  
  
  1. a ||= b 
    2. 
  
  
  
  2. //等價(jià)于 
    3. 
  
  
  
  3. aa = a || (a = b) 
    4. 
  
  
  
  4. a &&= b 
    5. 
  
  
  
  5. //等價(jià)于 
    6. 
  
  
  
  6. aa = a && (a = b) 
    7. 
  
  
  
  7. a ??= b 
    8. 
  
  
  
  8. //等價(jià)于 
    9. 
  
  
  
  9. aa = a ?? (a = b)
    10.

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

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

 
 
 
    
  
  
  
  1. const pages = [ 
    2. 
  
  
  
  2.   { 
    3. 
  
  
  
  3.    title:'主會(huì)場(chǎng)', 
    4. 
  
  
  
  4.     path:'/' 
    5. 
  
  
  
  5.   }, 
    6. 
  
  
  
  6.   { 
    7. 
  
  
  
  7.     path:'/other' 
    8. 
  
  
  
  8.   }, 
    9. 
  
  
  
  9.   ... 
    10. 
  
  
  
  10. ] 
    11. 
  
  
  
  11. for (const page of pages){ 
    12. 
  
  
  
  12.  page.title ??= '默認(rèn)標(biāo)題' 
    13. 
  
  
  
  13. } 
    14. 
  
  
  
  14. console.table(pages) 
    15. 
  
  
  
  15. //(index)  title         path 
    16. 
  
  
  
  16. //0        "主會(huì)場(chǎng)"      "/" 
    17. 
  
  
  
  17. //1        "默認(rèn)標(biāo)題"    "/other"
    18.

小結(jié)：

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

數(shù)字分隔符

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

 
 
 
    
  
  
  
  1. const money = 1_000_000_000 
    2. 
  
  
  
  2. //等價(jià)于 
    3. 
  
  
  
  3. const money = 1000000000 
    4. 
  
  
  
  4. const totalFee = 1000.12_34 
    5. 
  
  
  
  5. //等價(jià)于 
    6. 
  
  
  
  6. const totalFee = 1000.1234
    7.

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

 
 
 
    
  
  
  
  1. const number = 0o123_456 
    2. 
  
  
  
  2. //等價(jià)于 
    3. 
  
  
  
  3. const number = 0o123456
    4.

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

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


本文標(biāo)題：JavaScriptES12新特性搶先體驗(yàn)
標(biāo)題網(wǎng)址：http://www.5511xx.com/article/dphgdci.html