首页>>前端>>JavaScript->ECMAScript 2021(ES12)新特性详解,很实用!

ECMAScript 2021(ES12)新特性详解,很实用!

时间:2023-11-29 本站 点击:0

简介

ES12是ECMA协会在2021年6月发行的一个版本,因为是ECMAScript的第十二个版本,所以也称为ES12.

ES12发行到现在已经有一个月了,那么ES12有些什么新特性和不一样的地方呢?一起来看看吧。

基本上ES12引入了replaceAll方法用于对String进行操作,Promise.any用于对Promise进行组合操作,AggregateError用于表示多个错误的集合,新的逻辑操作符??=, &&=, ||=,弱引用WeakRef,FinalizationRegistry用于垃圾回收的注册,一个数字的分隔符1_000,更加精准的数组sort方法Array.prototype.sort。

下面本文将会一一进行讲解。

replaceAll

熟悉java的朋友应该都知道,java中有两个进行字符串替换的方法,分别是replace和replaceAll,他们的区别在于replace是替换字符串,而replaceAll是进行正则表达式匹配。

但是在javascript中两者的涵义有所不同,在JS中replace是替换第一个出现的字符串,而replaceAll就是字面上的意思替换所有的字符串,我们举个例子:

conststring="flydeanisagoodfly"console.log(string.replace("fly","butterfly"));

上面的值返回:

butterflydeanisagoodfly

如果改用replaceAll:

conststring="flydeanisagoodfly"console.log(string.replaceAll("fly","butterfly"));butterflydeanisagoodbutterfly

私有方法

自从JS有了类的概念之后,就可以在类中定义方法,并通过实例化之后的类进行调用,如下所示:

classStudent{getAge(){console.log("永远18岁")}}student=newStudent();student.getAge();

上面代码运行结果:

"永远18岁"

但是如果我们不希望getAge()方法直接暴露给外部使用,也就是说希望getAge()是一个私有方法,那么只需要在方法前面加上#即可。

classStudent{#getAge(){console.log("永远18岁")}}student=newStudent();student.getAge();

同样运行,那么会得到下面的错误提示:

Error:student.getAgeisnotafunction

怎么处理呢?我们知道私有方法是可以在方法内部调用的,那么只需要创建一个公有方法,然后在这个公有方法中调用私有方法即可,如下所示:

classStudent{#getAge(){console.log("永远18岁")}getPublicAge(){this.#getAge();}}student=newStudent();student.getPublicAge();

我们可以得到同样的结果。

私有属性

上面讲到了私有方法,那么对于私有属性是怎处理的呢?

通常,对于属性,我们可以以get修饰符来进行修饰,然后就可以直接通过属性名来访问了:

classStudent{getAge(){return18;}}student=newStudent();console.log(student.Age);

结果我们会得到18这个输出。

同样,可以在属性名前面加上#,让其变成私有变量,如下所示:

classStudent{get#Age(){return18;}}student=newStudent();console.log(student.Age);

上面代码将会输出undefined。

要想访问上述的私有属性,则可以用公有属性去调用私有属性方法:

butterflydeanisagoodfly0

非常好用。

Promise.any() 和 AggregateError

promise.any可以返回任意一个提前resolve的结果,在现实的应用中,这种情况是非常常见的,我们来模拟一个例子:

butterflydeanisagoodfly1

上述代码可以随机输出promise one,promise two,promise three。

如果将上述代码改成所有的都reject,那么会抛出AggregateError:

butterflydeanisagoodfly2

报的错如下:

butterflydeanisagoodfly3

注意,必须是所有的promise都被reject之后才会抛出AggregateError,如果有部分成功,那么将会返回成功的结果。

数字分隔符

这个新特性是为了方便程序员看代码而出现的,如果数字比较大,那么看起来就不是那么一目了然,比如下面的长数字:

butterflydeanisagoodfly4

一眼看不出这个数字的体量到底是多大,所以ES12提供了数字分隔符_。

分隔符不仅可以分割十进制,也可以分割二净值或者十六净值的数据,非常好用。

butterflydeanisagoodfly5

上面例子分别代表了十进制,二进制和十六进制的数据,非常直观好用。

新的逻辑操作符

我们知道&& 和 || 是被来进行逻辑操作的运算符。

比如:

butterflydeanisagoodfly6

等操作,ES12提供了&& 和||的二元操作符,如下:

butterflydeanisagoodfly7

另外还提供了??的二元操作符,如:

butterflydeanisagoodfly8

上面代码的意思是,判断x是不是空,如果是空那么将y的值赋给x。

总结

ES12的几个新特性还是挺实用的,大家可以尝试一下。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/JavaScript/674.html