JavaScriptES12新特性抢先体验

而每年，JavaScript都会更新添加新的特性新标准，在今年ES2020发布了，而ES2020（ES12）也预计将在明年即2021年年中发布。每年的新特性都会经历四个阶段，而第四阶段也就是最后一个阶段，本文即将介绍的即提案4中的相关新特性，也是意味着这些新特性将很大程度的出现在下一个版本中

成都创新互联成立以来不断整合自身及行业资源、不断突破观念以使企业策略得到完善和成熟，建立了一套“以技术为基点，以客户需求中心、市场为导向”的快速反应体系。对公司的主营项目，如中高端企业网站企划 / 设计、行业 / 企业门户设计推广、行业门户平台运营、成都App定制开发、移动网站建设、微信网站制作、软件开发、绵阳电信机房机柜租用等实行标准化操作，让客户可以直观的预知到从成都创新互联可以获得的服务效果。

特性抢先知：

  •  String.prototype.replaceAll 新增replaceAll
  •  Promise.any
  •  WeakRefs
  •  逻辑运算符和赋值表达式
  •  数字分隔符号

replaceAll

看到replaceAll这个词，相比很容易联想到replace。在JavaScript中，replace方法只能是替换字符串中匹配到的第一个实例字符，而不能进行全局多项匹配替换，唯一的办法是通过正则表达式进行相关规则匹配替换

而replaceAll则是返回一个全新的字符串，所有符合匹配规则的字符都将被替换掉，替换规则可以是字符串或者正则表达式。

 
 
 
    
  
  
  
  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在使用正则表达式的时候，如果非全局匹配（/g），则replaceAll()会抛出一个异常

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

Promise.any

当Promise列表中的任意一个promise成功resolve则返回第一个resolve的结果状态 如果所有的promise均reject，则抛出异常表示所有请求失败

 
 
 
    
  
  
  
  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(`输出结果: ${value}`)) 
    7. 
  
  
  
  7. .catch (err => console.log(err)) 
    8. 
  
  
  
  8. //输出 
    9. 
  
  
  
  9. //输出结果:哎呀，她接受我了
    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(`请求结果: ${value}`)) 
    7. 
  
  
  
  7. .catch (err => console.log(err)) 
    8. 
  
  
  
  8. //输出 
    9. 
  
  
  
  9. AggregateError: All promises were rejected
    10.

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条则做对应提示

 
 
 
    
  
  
  
  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('当前调用次数已经超过1000次了，over') 
    11. 
  
  
  
  11.   } 
    12. 
  
  
  
  12.   map.set(obj, called) 
    13. 
  
  
  
  13. }
    14.

如上虽然可以实现我们的功能，但是会发生内存溢出,因为传递给doSomething函数的每个对象都永久保存在map中，并且不会被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('当前调用次数已经超过1000次了，over') 
    11. 
  
  
  
  11.   } 
    12. 
  
  
  
  12.   wmap.set(obj, called) 
    13. 
  
  
  
  13. }
    14.

因为是弱引用，所以WeakMap、WeakSet的键值对是不可枚举的

WeakSet和WeakMap相似，但是每个对象在WeakSet中的每个对象只可能出现一次，WeakSet中所有对象都是唯一的

 
 
 
    
  
  
  
  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对象 
    9. 
  
  
  
  9. ws.has(foo) //false 已删除 
    10. 
  
  
  
  10. ws.has(bar) //仍存在
    11.

WeakSet与Set相比有以下两个区别

  •  WeakSet只能是对象集合，而不能是任何类型的任意值
  •  WeakSet弱引用，集合中对象引用为弱引用，如果没有其他对WeakSet对象的引用，则会被GC回收

最后，WeakRef实例有一个方法deref，返回引用的原始对象，如果原始对象被回收，则返回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.

对于缓存远程数据来说，这可能不是一个好主意，因为远程数据可能会不可预测地从内存中删除。在这种情况下，最好使用LRU之类的缓存。

逻辑运算符和赋值表达式

逻辑运算符和赋值表达式，新特性结合了逻辑运算符（&&，||，??）和赋值表达式而JavaScript已存在的 复合赋值运算符有：

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

现有的的运算符，其工作方式都可以如此来理解

表达式：a op= b

等同于：a = a op b

逻辑运算符和其他的复合赋值运算符工作方式不同

表达式：a op= b

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

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

为什么不再是跟以前的运算公式a = a op b一样呢，而是采用a = a op (a = b)。因为后者当且仅当a的值为false的时候才计算赋值，只有在必要的时候才执行分配，而前者的表达式总是执行赋值操作

??=可用来补充/初始化缺失的属性

 
 
 
    
  
  
  
  1. const pages = [ 
    2. 
  
  
  
  2.   { 
    3. 
  
  
  
  3.    title:'主会场', 
    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 ??= '默认标题' 
    13. 
  
  
  
  13. } 
    14. 
  
  
  
  14. console.table(pages) 
    15. 
  
  
  
  15. //(index)  title         path 
    16. 
  
  
  
  16. //0        "主会场"      "/" 
    17. 
  
  
  
  17. //1        "默认标题"    "/other"
    18.

小结：

  •  &&=：当LHS值存在时，将RHS变量赋值给LHS
  •  ||=：当LHS值不存在时，将RHS变量赋值给LHS
  •  ??= ：当LHS值为null或者undefined时，将RHS变量赋值给LHS

数字分隔符

数字分隔符，可以在数字之间创建可视化分隔符，通过_下划线来分割数字，使数字更具可读性

 
 
 
    
  
  
  
  1. const money = 1_000_000_000 
    2. 
  
  
  
  2. //等价于 
    3. 
  
  
  
  3. const money = 1000000000 
    4. 
  
  
  
  4. const totalFee = 1000.12_34 
    5. 
  
  
  
  5. //等价于 
    6. 
  
  
  
  6. const totalFee = 1000.1234
    7.

该新特性同样支持在八进制数中使用

 
 
 
    
  
  
  
  1. const number = 0o123_456 
    2. 
  
  
  
  2. //等价于 
    3. 
  
  
  
  3. const number = 0o123456
    4.

该新特性方便读取数据，可以让我们「打工人」更容易辨认"资产" 不过话说回来，小编的资产好像不配使用该特性...敲重点！！！

本次所有新特性均介绍的第4阶段，意味着将出现在下一个版本中的，没有介绍阶段3的，因为不确定是否一定会出现在下个版本中。本文介绍的新特性均可直接在最新版的谷歌浏览器中愉快体验。

当前标题：JavaScriptES12新特性抢先体验
分享链接：http://www.shufengxianlan.com/qtweb/news6/202056.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站设计公司知识

分类信息网

成都品牌官网设计公司　　 　成都网络公司　　 　资阳做网站　　 　腾讯香港空间　　 　重庆花箱　　 　四川黔盛装饰　　 　成都微信二次开发　　 　成都工装公司　　 　企业网站设计　　 　四川主机托管　　 　网站报价方案　　 　网站SEO优化排名　　 　百度关键词排名　　 　服务器机柜　　 　成都网站建设　　 　成都多线服务器托管　　 　重庆联通机房托管　　 　成都网站优化　　 　微信小程序开发　　 　网站制作报价