简介

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)新特性简介的更多相关文章

  1. ECMAScript 2016(ES7)新特性简介

    简介 自从ES6(ECMAScript 2015)在2015年发布以来,ECMAScript以每年一个版本的速度持续向前发展.到现在已经是ECMAScript 2020了. 每个版本都有一些新的特性, ...

  2. ECMAScript 2017(ES8)新特性简介

    目录 简介 Async函数 共享内存和原子操作 Object的新方法 String的新方法 逗号可以添加到函数的参数列表后面了 简介 ES8是ECMA协会在2017年6月发行的一个版本,因为是ECMA ...

  3. ECMAScript 2018(ES9)新特性简介

    目录 简介 异步遍历 Rest/Spread操作符和对象构建 Rest Spread 创建和拷贝对象 Spread和bject.assign() 的区别 正则表达式 promise.finally 模 ...

  4. ECMAScript 2019(ES10)新特性简介

    简介 ES10是ECMA协会在2019年6月发行的一个版本,因为是ECMAScript的第十个版本,所以也称为ES10. 今天我们讲解一下ES10的新特性. ES10引入了2大特性和4个小的特性,我们 ...

  5. ECMAScript 2020(ES11)新特性简介

    目录 简介 动态imports import.meta export加强 BigInt matchAll() globalThis Promise.allSettled() ??操作符 ?.操作符 总 ...

  6. ES6新特性简介

    ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...

  7. ECMAScript 6新特性简介

    目录 简介 ECMAScript和JavaScript的关系 let和const 解构赋值 数组的扩展 函数的扩展 简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言 ...

  8. PHP7 新特性 简介

    整理了一些常用的新特性,欢迎点赞!!! 新增操作符 1.?? $username = $_GET['user'] ?? ''; $username = isset($_GET['user']) ? $ ...

  9. webpack3新特性简介

    6月20号webpack推出了3.0版本,官方也发布了公告.根据公告介绍,webpack团队将未来版本的改动聚焦在社区提出的功能需求,同时将保持一个快速.稳定的发布节奏.本文主要依据公告内容,简单介绍 ...

随机推荐

  1. Ubuntu安装ssh,及失败解决方案

    网上有很多介绍在Ubuntu下开启SSH服务的文章,但大多数介绍的方法测试后都不太理想,均不能实现远程登录到Ubuntu上,最后分析原因是都没有真正开启ssh-server服务.最终成功的方法如下: ...

  2. 当任意文件上传偶遇Safedog

    0x01 写在前面 渗透过程中可能会经常遭遇WAF,此时不要轻易放弃,绞尽脑汁竭尽全力,或许弹尽粮绝之时也是柳暗花明之日. 0x02 过狗上传 一次项目渗透过程中,找个一处上传功能 先上传图片,测试上 ...

  3. STM32—4线SPI驱动SSD1306 OLED

    文章目录 一.OLED简介 二.驱动SSD1306所需知识 1.引脚介绍 2.通信时序 3.显存GRAM 4.字库 5.SSD1306基本命令 三.代码讲解 1.相关引脚配置 2.模拟SPI通信 3. ...

  4. 优化 SQL 语句的步骤

    优化 SQL 语句的步骤 1.分析MySQL服务器当前的状态信息 SHOW SESSION STATUS; SHOW SESSION STATUS LIKE 'Com_%' //当前会话下所有语句类型 ...

  5. CSS Transform完全指南(第二版) #flight.Archives007

    Title/ CSS Transform完全指南(第二版) #flight.Archives007 序: 第7天了! 终身学习, 坚持创作, 为生活埋下微小的信仰. 我是忘我思考,共同进步! 简介: ...

  6. noip18

    T1 来自cf原题 考场直接暴力枚举 \(A,B\),15pts. 正解: 首先时间的表达式,\(T=\frac{A}{a_{i}}+\frac{B}{b_{i}}\),然后以\(\frac{1}{a ...

  7. wpf Button 动态改变效果

    <Button  x:Name="LearnMore"  Grid.Row="6"  HorizontalAlignment="Left&quo ...

  8. WPF 饼状图,柱形图,折线图 (3 饼状图)

    网址:https://www.cnblogs.com/CSSZBB/p/12746214.html 饼状图相对来说复杂一些.因为需要计算很多坐标,线来看下这个列子. 圆首先想到Ellipse.但是El ...

  9. Sublime Text3 显示左侧的目录树

    file->open folder选择一个文件夹,打开一个新窗口把原来的关掉 View->Sise Bar->Hide Side Bar就可以了

  10. Hutool中那些常用的工具类和方法

    Hutool中那些常用的工具类和方法 Hutool是一个Java工具包,它帮助我们简化每一行代码,避免重复造轮子.如果你有需要用到某些工具方法的时候,不妨在Hutool里面找找,可能就有.本文将对Hu ...