简介
ES11是ECMA协会在2020年6月发行的一个版本，因为是ECMAScript的第十一个版本，所以也称为ES11.
明天咱们解说一下ES11的新个性。
ES11引入了9个新个性，咱们接下来一一解说。
动静imports
在ES11之前，咱们能够应用上面的形式进行模块的导入：
import * as TestModule from "./test-module.js";
然而下面的导入形式会有一些问题，首先是效率的问题，所有的module都须要在首次加载的时候导入，会导致程序效率的升高。另外下面的模块名字是写死的，不能够在程序运行的时候进行动静批改。
也就是说下面的模块导入形式，不能对模块进行动静导入，或者按需导入，在应用上有诸多的不便。
为了解决这个问题，ES11引入了新的import() 办法，应用这个办法，你能够对模块进行动静导入，并且通过设置模块名为变量的模式，能够对模块名进行动静批改，十分的神奇。咱们看一个具体的应用例子：
const baseModulePath = "./baseModules";
const btnImportModule = document.getElementById("btnImportModule");
let userList = [];
btnImportModule.addEventListener("click", async e => {
const userModule = await import(`${baseModulePath}/users.js`);
userList = userModule.getUsers();
});
下面代码中咱们定义了一个根本的Module门路，通过点击页面上的按钮，能够动静的加载一个users.js模块，而后调用该模块的getUsers()办法，取得userList列表。
import.meta
除了动静引入模块之外，import还提供了一个元属性meta,它蕴含了以后引入的模块的信息，目前他外面有一个url属性，代表模块被援用的URL。如果想应用URL信息，那么能够在代码中应用import.meta.url。
export增强
import是在ECMAScript 2015中引入的，次要被用来做模块的引入，import能够引入整个模块，也能够引入局部模块。如下所示：
import {something} from "./test-module.js";
import * from "./test-module.js";
和import对应的就是export，同样能够export所有或者局部，如下所示：
export {something} from "./test-module.js";
export * from "./test-module.js";
通常状况来说，下面讲的import和export曾经够用了，然而对于导出模块须要重命名的状况，咱们不能间接导出，而是必须先在import的时候进行重命名，而后再应用export将重命名的模块导出：
import * as myModule from "./test-module.js";
export {myModule};如果应用export的加强，则不须要应用import，间接应用export导出即可：
export * as {myModule} from "./test-module.js";BigInt
ES11引入了新的数据类型BigInt，在这之前，javascript中示意数字的对象是Number，它能够示意64-bit的浮点类型数字。当然它也能够代表整数，然而整数示意的最大值是2^53,也能够用Number.MAX_SAFE_INTEGER来示意。
一般来说Number曾经够用了，然而如果在某些状况下须要对64-bit的整数进行存储或者运算，或者要示意的范畴超过了64-bit的话，Number就不够用了。
怎么办呢？如果只是存储的话，能够存储为字符串，然而第二种字符串就不实用了。于是引入了BigInt来解决这个问题。要示意BigInt，只须要在数字的前面加上n即可。
const bigInt = 112233445566778899n;
或者应用构造函数来结构bigInt：
const bigInt = BigInt("112233445566778899");
能够应用typeof来查看bigInt的类型。要留神的是尽管Number和BigInt都代表的是数字，然而两者是不能混用的，你不能将一个Number和一个BigInt相加。这会报TypeError异样。
如果非要进行操作，那么能够应用BigInt构造函数将Number转换成为BigInt之后再进行。
matchAll()
正则表达式的匹配是一个十分常见的操作，通常咱们应用regExp.exec来进行正则的匹配，举个正则匹配的例子如下：
const regExp = /yyds(\d+)/g;
const text = 'yyds1 is a very good yyds2';
let matches;
while ((matches = regExp.exec(text)) !== null) {
console.log(matches);
}下面的代码运行后果如下：
["yyds1","1"]
["yyds2","2"]
咱们失去了所有匹配的值。不过须要应用一个循环来进行遍历，应用起来有诸多的不便，为了简略起见，ES11引入了matchAll()办法。这个办法能够简略的返回一个遍历器，通过遍历这个遍历器，就能够失去所有的匹配的值，如下所示：
const regExp = /yyds(\d+)/g;
const text = 'yyds1 is a very good yyds2';
let matches = [...text.matchAll(regExp)];
for (const match of matches) {
console.log(match);
}globalThis
对于javascript来说，不同的环境对应的全局对象的获取形式也是不同的，对于浏览器来说通常应用的是window，然而在web worker中应用的是self，而在nodejs中应用的是global。
为了解决在不同环境中的全局对象不同的问题，ES11引入了globalThis，通过这个全局对象，程序员就不必再去辨别到底是在哪个环境下了，只须要应用globalThis即可。
Promise.allSettled()
自从Promise引入之后，有两个办法能够对Promise进行组合，别离是Promise.all() 和Promise.race()， 他们别离示意返回所有的Promise和返回最快的那个。
对于Promise.all()来说，它会期待所有的Promise都运行结束之后返回，如果其中有一个Promise被rejected，那么整个Promise.all()都会被rejected。在这种状况下，如果有一个Promise被rejected，其余的Promise的后果也都获取不了。
为了解决这个问题，ES11引入了Promise.allSettled() 办法，这个办法会期待所有的Promise完结，不论他们是否被rejected,所以能够应用上面的代码取得所有的后果，而不论其中是否有Promise呈现问题。
const promises = [promise1("/do1"), promise2("/do2")];
const allResults = await Promise.allSettled(promises);
const errors = results
.filter(p => p.status === 'rejected')
.map(p => p.reason);??操作符
??操作符是一个判断是否为空而后赋值的操作，如果没有这个操作符，咱们通常应用||来简略的进行这个操作，如下所示：
const yourAge = someBody.age || 18下面的代码意思是如果someBody.age 是空，那么就将yourAge设置成为18。
然而下面代码有个问题，如果someBody.age=0 的话，上述逻辑也成立。应用？？操作符能够解决这个问题。
const yourAge = someBody.age ？？ 18?.操作符
咱们有时候在获取某个对象的属性的时候，须要进行对象的null判断，否则从null对象中取出属性就会报错，然而通常的?:操作符应用起来太简单了，如果有多个对象和属性连写的状况下更是如此，如果应用?.操作符就会简略很多：
const age = school?.class?.student?.age;如上所示，这个一个非常复杂的连写操作，然而应用?.就变得很简略。
同样?.还能够用在对象的办法上：
const age = student.getAge?.();
下面代码示意，如果student的getAge办法存在，则调用，否则返回undefined。
总结
事实上所有的古代浏览器基本上都反对ES11了，IE除外。大家能够纵情尝试ES11的新特色。
本文已收录于 http://www.flydean.com/ecmascript-11/
最艰深的解读，最粗浅的干货，最简洁的教程，泛滥你不晓得的小技巧等你来发现！
欢送关注我的公众号:「程序那些事」,懂技术，更懂你！
发表回复