JavaScript ES12新特性抢先体验

JavaScript ES2021 (ES12)新特性

image
image

在上一篇文章中，我们介绍了ES2020的相关九大特性，里面不少实用的新特性让我们受益良多。ES11屡试不爽的新特性，你用上了几个？

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

特性抢先知：

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

replaceAll

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

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

let string = 'I like 前端,I like 前端公虾米'

//使用replace
let replaceStr = string.replace('like','love')
console.log(replaceStr)  // 'I love 前端,I like 前端公虾米'

//replace使用正则匹配所有
console.log(string.replace(/like/g,'love')) // 'I love 前端,I love 前端公虾米'

//使用replaceAll
let replaceAllStr = string.replaceAll('like','love')
console.log(replaceAllStr) // 'I love 前端,I love 前端公虾米'

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

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

Promise.any

当Promise列表中的任意一个promise成功resolve则返回第一个resolve的结果状态
如果所有的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(`输出结果: ${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.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条则做对应提示

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) //true
ws.has(bar) //true

ws.delete(foo) //删除foo对象
ws.has(foo) //false 已删除
ws.has(bar) //仍存在

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

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

逻辑运算符和赋值表达式

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

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

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

表达式：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 = 1000000000

const totalFee = 1000.12_34
//等价于
const totalFee = 1000.1234

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

const number = 0o123_456
//等价于
const number = 0o123456

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

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

包邮送书

123123

123

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,937评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,503评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,712评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,668评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,677评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,601评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,975评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,637评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,881评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,387评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,971评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2赞 342