JavaScript ES12 新特性抢先体验

Souleigh ✨ 等级 823 0 0

JavaScript ES12 新特性抢先体验

而每年,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.anyPromise.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) //仍存在

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之类的缓存。
<br/>
## 逻辑运算符和赋值表达式
> 逻辑运算符和赋值表达式,新特性结合了逻辑运算符(&&,||,??)和赋值表达式而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```的时候才计算赋值,只有在必要的时候才执行分配,而前者的表达式总是执行赋值操作.
<br/>
## ??=可用来补充/初始化缺失的属性

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
<br/>
## 数字分隔符

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

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

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

收藏
评论区

相关推荐

JavaScript ES12 新特性抢先体验
而每年,JavaScript都会更新添加新的特性新标准,在今年ES2020发布了,而ES2020(ES12)也预计将在明年即2021年年中发布。每年
What the f*ck JavaScript?
What the fck JavaScript? 一个有趣和棘手的 JavaScript 示例列表。 JavaScript 是一种很好的语言。
14个优秀 JS 前端框架、库、工具及其使用时机
  这篇文章主要描述现今流行的一些 Javascript web 前端框架,库以及它们的适用场景。   新的 Javascript 库层出不穷,从而Web 社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的 Javascript 框架和库近乎
javascript实践教程-01-javascript介绍
本节目标1. 了解javascript是什么。2. 了解javascript能干什么。 内容摘要本篇介绍了javascript是什么,为什么要用javascript,ECMAScript标准是什么等。阅读时间大约510分钟。 javascript是什么?javascript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HT
javascript实践教程-02-javascript入门
本节目标1. 掌握如何编写javascript代码。2. 掌握javascript的3个弹框。3. 掌握javascript的注释。4. 掌握浏览器的调试工具控制台。 内容摘要本篇介绍了如何在网页上编写js代码,如何引入外部js代码文件,js的3个弹框、注释语法,还有浏览器调试工具的控制台使用。阅读时间1520分钟。 script标签如果我们需要在网页中编写
JS的另类写法(书签栏工具原型)
<script type="text/javascript"> javascript : void (function(version) { var scriptTag = document.createElement('script'); scriptTag.type = 'text/javascript';
Java 8 新特性
Java 8 Nashorn JavaScript ========================= Nashorn 一个 javascript 引擎。 从JDK 1.8开始,Nashorn取代Rhino(JDK 1.6, JDK1.7)成为Java的嵌入式JavaScript引擎。Nashorn完全支持ECMAScript 5.1规范以及一些扩展。它
AJAX与Django
AJAX ---- #### 什么是AJAX? AJAX不是JavaScript的规范,它的缩写:Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求。提交任务之后,不原地等待,直接执行下一行代码,任务的返回通过回调机制。 局部刷新,不整体刷新,而是界面莫个地方局部刷新 #### AJAX原理
ECMAScript 6 新特性简介
简介 == ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,正式发布与2015年6月。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。 今天我们将会讲解一下ES6中引入的语法新特性。 ECMAScript和JavaScript的关系 ================
ECMAScript 6新特性简介
简介 == ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,正式发布与2015年6月。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。 今天我们将会讲解一下ES6中引入的语法新特性。 ECMAScript和JavaScript的关系 ================
JavaScript 非常重要的几个概念
JavaScript是一门比较复杂的语言。如果你是一名JavaScript开发人员,不管处于什么样的水平,都有必要了解JavaScript的基本概念。小编最近的工作涉及到JavaScript,于是本文就介绍了几个非常重要的 JavaScript 概念,但绝对不是说JavaScript 开发人员只需要知道这些就可以了。 01-变量赋值(值与引用) Java
JavaScript基础系列
![JavaScript基础系列](https://oscimg.oschina.net/oscnet/c1dc2f84f95d13105d79ba82a648f0c5eab.png) > JavaScript基础系列 ![image.png](https://oscimg.oschina.net/oscnet/e16bf4232aab0acb21c56
JavaScript的 基本数据类型
**第一:Javascript对象是** **第二:Javascript中** **第三:Javascript的对象是数据;** **第四:JavaScript 中的对象可以简单理解成"名称:值"对(name:value)。名称(name):"名称"部分是一个 JavaScript 字符串** **参考----------https://www
Node.js简介及如何学习Node.js
本文介绍Node.js的诞生史以及如何学习Node.js。 Node.js简史 --------- 从Node.js的命名上可以看到,Node.js的官方开发语言是JavaScript。之所以选择使用JavaScript,显然与JavaScript的开发人员多有关。总所周知,JavaScript是伴随着互联网的发展而火爆起来的,JavaScript也是前
Springmvc异步上传文件
<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.ext.js" type="text/javascript"></script><script src="js/jquery.form.js" type="text/javascript"