ECMAScript 2021(ES12)新特性简介

2024-02-24 15:58

本文主要是介绍ECMAScript 2021(ES12)新特性简介,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

简介

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就是字面上的意思替换所有的字符串,我们举个例子:

const string="flydean is a good fly"
console.log(string.replace("fly", "butterfly"));

上面的值返回:

butterflydean is a good fly

如果改用replaceAll:

const string="flydean is a good fly"
console.log(string.replaceAll("fly", "butterfly"));
butterflydean is a good butterfly

私有方法

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

class Student {getAge() {console.log("永远18岁")}
}student= new Student();
student.getAge();

上面代码运行结果:

"永远18岁"

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

class Student {#getAge() {console.log("永远18岁")}
}student= new Student();
student.getAge();

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

Error: student.getAge is not a function

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

class Student {#getAge() {console.log("永远18岁")}getPublicAge(){this.#getAge();}}student= new Student();
student.getPublicAge();

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

私有属性

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

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

class Student {get Age() {return 18;}}student= new Student();
console.log(student.Age);

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

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

class Student {get #Age() {return 18;}}student= new Student();
console.log(student.Age);

上面代码将会输出undefined。

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

class Student {get #Age() {return 18;}get publicAge() {return this.#Age}
}student= new Student();
console.log(student.publicAge);

非常好用。

Promise.any() 和 AggregateError

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

const prom1 = new Promise((resolve, reject) => {setTimeout(() => resolve("promise one"),Math.floor(Math.random() * 100));
});
const prom2 = new Promise((resolve, reject) => {setTimeout(() => resolve("promise two"),Math.floor(Math.random() * 100));
});
const prom3 = new Promise((resolve, reject) => {setTimeout(() => resolve("promise three"),Math.floor(Math.random() * 100));
});(async function() {const result = await Promise.any([prom1, prom2, prom3]);console.log(result); 
})();

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

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

const prom1 = new Promise((resolve, reject) => {setTimeout(() => reject("promise one rejected"),Math.floor(Math.random() * 100));
});
const prom2 = new Promise((resolve, reject) => {setTimeout(() => reject("promise two rejected"),Math.floor(Math.random() * 100));
});
const prom3 = new Promise((resolve, reject) => {setTimeout(() => reject("promise three rejected"),Math.floor(Math.random() * 100));
});try{
(async function() {const result = await Promise.any([prom1, prom2, prom3]);console.log(result); 
})();
} catch(error) {console.log(error.errors);
}

报的错如下:

Uncaught (in promise) AggregateError: No Promise in Promise.any was resolved

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

数字分隔符

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

const number= 123456789;

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

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

const number = 1_000_000_000_000;
const binary = 0b1010_0101_1111_1101;
const hex = 0xAF_BF_C3;

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

新的逻辑操作符

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

比如:

1 && 2 
1 || 2 

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

var x = 1;
var y = 2;
x &&= y;
x ||= y;

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

var x;
var y = 2;
x ??= y;

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

总结

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

本文已收录于 http://www.flydean.com/ecmascript-12/

最通俗的解读,最深刻的干货,最简洁的教程,众多你不知道的小技巧等你来发现!

欢迎关注我的公众号:「程序那些事」,懂技术,更懂你!

这篇关于ECMAScript 2021(ES12)新特性简介的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/742606

相关文章

Qt QCustomPlot库简介(最新推荐)

《QtQCustomPlot库简介(最新推荐)》QCustomPlot是一款基于Qt的高性能C++绘图库,专为二维数据可视化设计,它具有轻量级、实时处理百万级数据和多图层支持等特点,适用于科学计算、... 目录核心特性概览核心组件解析1.绘图核心 (QCustomPlot类)2.数据容器 (QCPDataC

从入门到精通C++11 <chrono> 库特性

《从入门到精通C++11<chrono>库特性》chrono库是C++11中一个非常强大和实用的库,它为时间处理提供了丰富的功能和类型安全的接口,通过本文的介绍,我们了解了chrono库的基本概念... 目录一、引言1.1 为什么需要<chrono>库1.2<chrono>库的基本概念二、时间段(Durat

JDK9到JDK21中值得掌握的29个实用特性分享

《JDK9到JDK21中值得掌握的29个实用特性分享》Java的演进节奏从JDK9开始显著加快,每半年一个新版本的发布节奏为Java带来了大量的新特性,本文整理了29个JDK9到JDK21中值得掌握的... 目录JDK 9 模块化与API增强1. 集合工厂方法:一行代码创建不可变集合2. 私有接口方法:接口

C#特性(Attributes)和反射(Reflection)详解

《C#特性(Attributes)和反射(Reflection)详解》:本文主要介绍C#特性(Attributes)和反射(Reflection),具有很好的参考价值,希望对大家有所帮助,如有错误... 目录特性特性的定义概念目的反射定义概念目的反射的主要功能包括使用反射的基本步骤特性和反射的关系总结特性

PyTorch高级特性与性能优化方式

《PyTorch高级特性与性能优化方式》:本文主要介绍PyTorch高级特性与性能优化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、自动化机制1.自动微分机制2.动态计算图二、性能优化1.内存管理2.GPU加速3.多GPU训练三、分布式训练1.分布式数据

rust 中的 EBNF简介举例

《rust中的EBNF简介举例》:本文主要介绍rust中的EBNF简介举例,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. 什么是 EBNF?2. 核心概念3. EBNF 语法符号详解4. 如何阅读 EBNF 规则5. 示例示例 1:简单的电子邮件地址

Python 异步编程 asyncio简介及基本用法

《Python异步编程asyncio简介及基本用法》asyncio是Python的一个库,用于编写并发代码,使用协程、任务和Futures来处理I/O密集型和高延迟操作,本文给大家介绍Python... 目录1、asyncio是什么IO密集型任务特征2、怎么用1、基本用法2、关键字 async1、async

SpringBoot3.4配置校验新特性的用法详解

《SpringBoot3.4配置校验新特性的用法详解》SpringBoot3.4对配置校验支持进行了全面升级,这篇文章为大家详细介绍了一下它们的具体使用,文中的示例代码讲解详细,感兴趣的小伙伴可以参考... 目录基本用法示例定义配置类配置 application.yml注入使用嵌套对象与集合元素深度校验开发

Android Mainline基础简介

《AndroidMainline基础简介》AndroidMainline是通过模块化更新Android核心组件的框架,可能提高安全性,本文给大家介绍AndroidMainline基础简介,感兴趣的朋... 目录关键要点什么是 android Mainline?Android Mainline 的工作原理关键

新特性抢先看! Ubuntu 25.04 Beta 发布:Linux 6.14 内核

《新特性抢先看!Ubuntu25.04Beta发布:Linux6.14内核》Canonical公司近日发布了Ubuntu25.04Beta版,这一版本被赋予了一个活泼的代号——“Plu... Canonical 昨日(3 月 27 日)放出了 Beta 版 Ubuntu 25.04 系统镜像,代号“Pluc