JavaScript ES12新特性抢先体验

开发 前端
本文即将介绍的即提案4中的相关新特性,也是意味着这些新特性将很大程度的出现在下一个版本中。

[[350375]]

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

特性抢先知:

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

replaceAll

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

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

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

需要注意的是,replaceAll在使用正则表达式的时候,如果非全局匹配(/g),则replaceAll()会抛出一个异常 

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

Promise.any

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

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

再来看下另一种情况 

  1. Promise.any([  
  2.   Promise.reject('Error 1'),  
  3.   Promise.reject('Error 2'),  
  4.   Promise.reject('Error 3')  
  5. ])  
  6. .then(value => console.log(`请求结果: ${value}`))  
  7. .catch (err => console.log(err))  
  8. //输出  
  9. 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条则做对应提示 

  1. let map = new Map()  
  2. function doSomething(obj){  
  3.  ...  
  4.  
  5. function useObject(obj){  
  6.  doSomething(obj)  
  7.   let called = map.get(obj) || 0  
  8.   called ++   
  9.   if(called>1000){ 
  10.       console.log('当前调用次数已经超过1000次了,over')  
  11.   }  
  12.   map.set(obj, called)  

如上虽然可以实现我们的功能,但是会发生内存溢出,因为传递给doSomething函数的每个对象都永久保存在map中,并且不会被GC回收,因此我们可以使用WeakMap

 

  1. let wmap = new WeakMap()  
  2. function doSomething(obj){  
  3.  ...  
  4.  
  5. function useObject(obj){  
  6.  doSomething(obj)  
  7.   let called = wmap.get(obj) || 0  
  8.   called ++  
  9.   if(called>1000){  
  10.      console.log('当前调用次数已经超过1000次了,over')  
  11.   }  
  12.   wmap.set(obj, called)  

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

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

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

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

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

最后,WeakRef实例有一个方法deref,返回引用的原始对象,如果原始对象被回收,则返回undefined 

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

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

逻辑运算符和赋值表达式

逻辑运算符和赋值表达式,新特性结合了逻辑运算符(&&,||,??)和赋值表达式而JavaScript已存在的 复合赋值运算符有:

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

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

表达式:a op= b

等同于:a = a op b

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

表达式:a op= b

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

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

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

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

  1. const pages = [  
  2.   {  
  3.    title:'主会场',  
  4.     path:'/'  
  5.   },  
  6.   {  
  7.     path:'/other'  
  8.   },  
  9.   ...  
  10.  
  11. for (const page of pages){  
  12.  page.title ??= '默认标题'  
  13.  
  14. console.table(pages)  
  15. //(index)  title         path  
  16. //0        "主会场"      "/"  
  17. //1        "默认标题"    "/other" 

小结:

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

数字分隔符

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

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

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

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

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

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

 

责任编辑:庞桂玉 来源: 前端大全
相关推荐

2022-05-25 07:22:07

ES12JavaScript语言

2021-07-15 08:55:17

ES12 ECMAScript JS 功能

2009-08-18 09:17:01

JavaScript2

2023-09-20 10:56:30

Fedora 39Linux

2023-01-31 07:36:25

JavaScript数组缓冲

2021-09-04 05:00:26

ESES2021ES12

2011-04-11 09:11:42

GNOME 3

2019-03-29 09:51:23

软件开发者 性能

2022-08-05 13:14:25

ES2022JavaScript代码

2009-08-05 08:40:42

Windows 7新特性

2022-10-31 16:20:33

JavaScript前端开发

2021-04-30 19:53:41

Java表达式代码

2023-05-22 16:03:00

Javascript开发前端

2010-03-05 08:56:14

JSFUnit 1.2

2011-08-04 09:15:08

Gnome 3.2Gnome 3.1.5

2023-04-19 15:26:52

JavaScriptES13开发

2022-01-09 23:40:33

Windows 11Windows微软

2019-12-27 16:10:53

前端javascriptnode.js

2022-01-07 20:58:35

Windows 11操作系统微软

2023-11-23 10:21:11

ECMAScriptJavaScript
点赞
收藏

51CTO技术栈公众号