ECMAScript 2020(ES11)新特性简介

简介: ECMAScript 2020(ES11)新特性简介

简介

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

今天我们讲解一下ES11的新特性。

ES11引入了9个新特性,我们接下来一一讲解。

动态imports

在ES11之前,我们可以使用下面的方式进行模块的导入:

import * as TestModule from "./test-module.js";

导入模块的现有语法形式为静态声明。它们接受字符串字面作为模块标识符,并通过运行前"链接"过程将绑定引入本地范围。可能会导致程序加载速度的降低。而且上面的模块名字是写死的,不可以在程序运行的时候进行动态修改。

为了解决这个问题,ES11引入了新的import() 方法,使用这个方法,你可以对模块进行动态导入,并且通过设置模块名为变量的形式,可以对模块名进行动态修改,非常的神奇。我们看一个具体的使用例子:

const baseModulePath = "./baseModules";
const btn = document.getElementById("btn");
let userList = [];
btn.addEventListener("click", async () => {
  const userModule = await import(`${baseModulePath}/users.js`);
  userList = userModule.getUserList();
});

上面代码中我们定义了一个基本的Module路径,通过点击页面上的按钮,可以动态的加载一个users.js模块,然后调用该模块的getUserList()方法,获得用户列表。

import.meta

除了动态引入模块之外,import还提供了一个元属性meta,它包含了当前引入的模块的信息,目前他里面有一个url属性,代表模块被引用的URL。如果想使用URL信息,那么可以在代码中使用import.meta.url

BigInt

ES11引入了新的数据类型BigInt,在这之前,javascript中表示数字的对象是Number,它可以表示64-bit的浮点类型数字。当然它也可以代表整数,但是整数表示的最大值是2^53,也可以用Number.MAX_SAFE_INTEGER来表示。

一般来说Number已经够用了,但是如果在某些情况下需要对64-bit的整数进行存储或者运算,或者要表示的范围超过了64-bit的话,Number就不够用了。

怎么办呢?如果只是存储的话,可以存储为字符串,但是第二种字符串就不适用了。于是引入了BigInt来解决这个问题。要表示BigInt,只需要在数字的后面加上n即可。

const bigInt1 = 112233445566778899n;
const bigInt2 = BigInt("112233445566778899");

可以使用typeof来查看bigInt的类型。要注意的是虽然NumberBigInt都代表的是数字,但是两者是不能混用的,你不能将一个Number和一个BigInt相加。这会报TypeError异常。

如果非要进行操作,那么可以使用BigInt构造函数将Number转换成为BigInt之后再进行。

String.prototype.matchAll()

matchAllmatch的增强版,match返回匹配的结果,matchAll返回更加详细的匹配结果

const str = 'abcdefga';
const reg = /a/g
const result1 = str.matchAll(reg);
/*
* result1
* ['a','a']
*/
const result2 = str.matchAll(reg);
/*
* result2
* [
*   [ 'a', index: 0, input: 'abcdefga', groups: undefined ],
*   [ 'a', index: 7, input: 'abcdefga', groups: undefined ]
* ]
*/

globalThis

对于javascript来说,不同的环境对应的全局对象的获取方式也是不同的,对于浏览器来说通常使用的是window,但是在web worker中使用的是self,而在nodejs中使用的是global

为了解决在不同环境中的全局对象不同的问题,ES11引入了globalThis,通过这个全局对象,程序员就不用再去区分到底是在哪个环境下了,只需要使用globalThis即可。

Promise.allSettled()

自从Promise引入之后,有两个方法可以对Promise进行组合,分别是Promise.all()Promise.race()

  • Promise.race():只要有一个resolve就返回(返回最快执行的那个)
  • Promise.all():它会等待所有的Promise都运行完毕之后返回,如果其中有一个Promiserejected,那么整个Promise.all()都会被rejected。在这种情况下,如果有一个Promise被rejected,其他的Promise的结果也都获取不了。
  • Promise.allSettled(): 这个方法会等待所有的Promise结束,不管他们是否被rejected,所以可以获得所有的结果。
const promises = [ fetch('index.html'), fetch('https://does-not-exist/') ];
const results = await Promise.allSettled(promises);
const errors = results
  .filter(p => p.status === 'rejected')
  .map(p => p.reason);

?? 空值合并运算符

??操作符是一个判断是否为空然后赋值的操作,如果没有这个操作符,我们通常使用||来简单的进行这个操作,如下所示:

const person = {
  name: 'Tom',
  age: 18,
}
const yourAge = person.age || 18;

上面的代码意思是如果person.age 是空,那么就将yourAge设置成为18

但是上面代码有个问题,如果someBody.age=0 的话,上述逻辑也成立。使用??操作符可以解决这个问题。

const person = {
  name: 'Tom',
  age: 18,
}
const yourAge = person.age ?? 18;

?. 可选链操作符

我们有时候在获取某个对象的属性的时候,需要进行对象的null判断,否则从null对象中取出属性就会报错,但是通常的?:操作符使用起来太复杂了,如果有多个对象和属性连写的情况下更是如此,如果使用?.操作符就会简单很多:

const person = {
  name: 'Tom',
  age: 18,
}
const age = person?.age;

如上所示,这个一个连写操作,但是使用?.就变得很简单。

同样?.还可以用在对象的方法上:

const person = {
  name: 'Tom',
  age: 18,
  getAge(){
    return person.age;
  }
}
const age = student.getAge?.();

上面代码表示,如果persongetAge方法存在,则调用,否则返回undefined

for-in

ECMAScript 遗留了 for-in 循环顺序的详尽介绍待填补。在ES2020中为 for-in 机制定义了一套规则。

参考

proposals/finished-proposals.md at master · tc39/proposals (github.com)


相关文章
|
XML 存储 数据处理
python绘制热力图-数据处理-VOC数据类别标签分布及数量统计(附代码)
python绘制热力图-数据处理-VOC数据类别标签分布及数量统计(附代码)
|
测试技术 Android开发
autojs横屏截图的正确姿势
牙叔教程 简单易懂
3288 0
|
存储 Kubernetes API
在K8S中,PVC创建和挂载失败原因有哪些?
在K8S中,PVC创建和挂载失败原因有哪些?
|
11月前
|
存储 C语言 C++
【C++】深入解析C/C++内存管理:new与delete的使用及原理(一)
【C++】深入解析C/C++内存管理:new与delete的使用及原理
229 2
|
11月前
|
存储 Oracle 关系型数据库
【数据库-DB2】深入了解DB2 reorg
本文介绍了DB2数据库中reorg操作的重要性,旨在通过重组表数据来消除数据碎片、压缩信息并提高数据访问速度。reorg操作能够根据索引关键字重新排序数据,减少查询I/O次数,提升查询性能。文章详细讲解了reorg的操作步骤、适用场景及注意事项,强调了在执行reorg前后更新统计信息的必要性。
601 2
|
9月前
|
负载均衡 算法 Linux
LVS+Keepalived:实现高效软负载均衡的利器
本文介绍了如何使用LVS(Linux Virtual Server)和Keepalived搭建高可用负载均衡集群。LVS通过不同调度算法将请求转发给后端服务器,而Keepalived基于VRRP协议实现服务高可用,避免IP单点故障。具体步骤包括环境准备、安装配置ipvsadm和Keepalived、启动服务及测试。文中还详细解释了配置文件中的关键参数,并提供了故障转移测试方法。最后,文章简要对比了软件、硬件和云负载均衡方案的特点,帮助读者选择合适的负载均衡策略。
1417 4
|
Kubernetes 监控 Cloud Native
云原生入门:从传统应用到容器化部署的旅程
【9月更文挑战第19天】在数字化浪潮中,企业正迅速将目光投向云原生技术,以实现更快的应用开发和更灵活的资源管理。本文将通过一个简单示例引导读者理解如何将传统应用转变为云原生应用,并部署至云端。我们将探索容器化技术的基础,以及它如何帮助企业解锁现代软件交付的速度和效率。准备好让你的应用乘上云原生的快车了吗?让我们开始这段令人兴奋的旅程吧!
138 11
|
11月前
|
JSON 测试技术 API
阿里云PAI-Stable Diffusion开源代码浅析之(二)我的png info怎么有乱码
阿里云PAI-Stable Diffusion开源代码浅析之(二)我的png info怎么有乱码
|
消息中间件 存储 Kafka
深入Kafka:如何保证数据一致性与可靠性?
**Kafka一致性详解:** 讲解了幂等性如何通过ProducerID和SequenceNumber确保消息唯一,防止重复处理,维持数据一致性。Kafka利用Zookeeper进行控制器和分区Leader选举,应对节点变动,防止脑裂,确保高可用性。实例中,电商平台用Kafka处理订单,保证每个订单仅处理一次,即使在异常情况下。关注微信公众号“软件求生”获取更多技术内容。
1812 0
|
开发工具 C语言 git
【嵌入式开源库】MultiTimer 的使用,一款可无限扩展的软件定时器
【嵌入式开源库】MultiTimer 的使用,一款可无限扩展的软件定时器
411 0