JavaScript栏目介绍体验ES12新特性。

抢先体验JavaScript ES12新特性-LMLPHP

特性抢先知:

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

replaceAll

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

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

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 前端公虾米'复制代码
登录后复制
let string = 'I like 前端,I like 前端公虾米'console.log(string.replaceAll(/like/,'love')) //TypeError复制代码
登录后复制

Promise.any

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.anyPromise.race十分容易混淆,务必注意区分,Promise.race 一旦某个promise触发了resolve或者reject,就直接返回了该状态结果,并不在乎其成功或者失败

WeakRefs

当我们通过(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) //truews.has(bar) //truews.delete(foo) //删除foo对象ws.has(foo) //false 已删除ws.has(bar) //仍存在复制代码
登录后复制

WeakSetSet相比有以下两个区别

  • 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之类的缓存。

逻辑运算符和赋值表达式

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

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

表达式:a op= b

等同于:a = a op b

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

表达式: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)复制代码
登录后复制

为什么不再是跟以前的运算公式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 = 1000000000const totalFee = 1000.12_34//等价于const totalFee = 1000.1234复制代码
登录后复制

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

const number = 0o123_456//等价于const number = 0o123456复制代码
登录后复制

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

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

以上就是抢先体验JavaScript ES12新特性的详细内容,更多请关注Work网其它相关文章!

09-11 13:57