ES11的新特性：String的matchAll⽅法、import（）动态导⼊
语句等
ECMA标准定义了ECMAScript 2020语⾔。它是ECMAScript语⾔规范的第11版。⾃从1997年第⼀版出版以来，ECMAScript已经发展
成为世界上使⽤最⼴泛的通⽤编程语⾔之⼀。
它被称为嵌⼊在web浏览器中的语⾔，但也被⼴泛应⽤于服务器和嵌⼊式应⽤程序。
那么ES11⼜引⼊了那些新特性呢？下⾯我们⼀起来了解⼀下。
01、String 的 matchAll ⽅法
matchAll() ⽅法返回⼀个包含所有匹配正则表达式的结果的迭代器。可以使⽤ f 遍历，或者使⽤ 展开运算符(...) 或者 Array.from
转换为数组.
const regexp = /t(e)(st(\d?))/g;const str = 'test1test2';
const matchs = str.matchAll(regexp);console.log(matchs); // RegExpStringIterator {}console.log([...matchs])/*0: (4) ["test1", "e", "st1", "1", index: 0, input: "()  和 matchAll() 区别：
在 matchAll 出现之前，通过在循环中调⽤ () 来获取所有匹配项信息。
const regexp = RegExp('foo[a-z]*','g');const str = 'table football, foosball';let match;
while ((match = (str)) !== null) {  console.log(`Found ${match[0]} start=${match.index} end=${regexp.lastIndex}.`);}// expected output: "Found football 如果使⽤ matchAll ，就可以不必使⽤ while 循环加 exec ⽅式。
const regexp = RegExp('foo[a-z]*','g');const str = 'table football, foosball';const matches = str.matchAll(regexp);
for (const match of matches) {  console.log(`Found ${match[0]} start=${match.index} end=${match.index + match[0].length}.`);}// expected output: "Found footbal
02、动态导⼊语句 import()
import 标准的⽤法是导⼊的⽊块是静态的，会使所有被带⼊的模块在加载时就别编译，⽆法做到按需加载编译，降低了⾸页的加载速度。
在某些场景中，你可能希望根据条件导⼊模块，或者按需导⼊模块，这是就可以使⽤动态导⼊代替静态导⼊了
在import() 之前，我们需要更具条件导⼊模块时只能使⽤ require()
if (xx) {  const module = require('/module')  }
// 现在可以这么写if (xx) {  const module = import('/module')}
@babel/preset-env 已经包含了 @babel/plugin-syntax-dynamic-import，因此如果要使⽤ import() 语法，只需要配置
@babel/preset-env 即可。
另外：import() 返回的是⼀个Promise 对象：
// module.jsexport default {  name: 'shenjp'}
/
/ index.jsif (true) {  let module = import('./module.js');  console.log(module); // Promise {<pending>  module.then(data => console.log(data)); // Module {default: {n
03、a
的。
<script type="module" src="my-module.mjs"></script>
console.a); // { url: "file:///home/user/my-module.mjs" }
因为 a 必须要在模块内部使⽤，如果不加 type="module"，控制台会报错：Cannot use 'a' outside a module。
在项⽬中需要下载 @open-wc/webpack-import-meta-loader  才能正常使⽤。
module: {    rules: [        {            test: /\.js$/,            use: [                solve('@open-wc/webpack-import-meta-loader'),                {                    loade
效果如下：
//src/index.jsimport React from 'react';console.a);//{index.js:38 {url: "127.0.0.1:3000/src/index.js"}}
04、export * as ns from 'module'
ES2020新增了 export * as XX from 'module'，和 import * as XX from 'module'。
// module.jsexport * as ns from './info.js'
可以理解为下⾯两条语句的合并：
import * as ns from './info.js';export { ns };
需要注意的是：export * as ns from 'module' 并不会真的导⼊模块，因此在该模块中⽆法使⽤ ns。
05、Promise.allSettled
Promise.allSettled()⽅法返回⼀个在所有给定的promise都已经fulfilled或rejected后的promise，并带有⼀个对象数组，每个对象表⽰对
应的promise结果。
当您有多个彼此不依赖的异步任务成功完成时，或者您总是想知道每个promise的结果时，通常使⽤它。
想⽐较之下， Promise.all() 更适合做相互依赖的Promise，只要有⼀个失败就结束。
const promise1 = solve(100);const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'info'));const promise3 = new Promise(( Promise.allSettled([promise1, promise2, promise3]).    then((results) => console.log(result));/*    [        { status: 'fulfilled', value: 100 },        { status: 'rejected', reas
可以看出，Promise.allSettled() 成功之后返回的也是⼀个数组，但是改数组的每⼀项都是⼀个对象，每个对象都有⼀个status属性，值为
fulfilled 和 rejected .
如果status是 fulfilled，那么改对象的另⼀个属性是 value ，对应的是该Promise成功后的结果。
js合并两个数组如果status是 rejected，那么对象的另⼀个属性是 reason，对应的是该Promise失败的原因。
06、新增数据类型: BigInt
BigInt 是⼀种数字类型的数据，它可以表⽰任意精度格式的整数。在此之前，JS 中安全的最⼤数字是 9009199254740991，即2^53-
1，在控制台中输⼊ Number.MAX_SAFE_INTEGER 即可查看。超过这个值，JS 没有办法精确表⽰。另外，⼤于或等于2的1024次⽅的
数值，JS ⽆法表⽰，会返回 Infinity。
BigInt 即解决了这两个问题。BigInt 只⽤来表⽰整数，没有位数的限制，任何位数的整数都可以精确表⽰。为了和 Number 类型进⾏区
分，BigInt 类型的数据必须添加后缀 n。
//Number类型在超过9009199254740991后，计算结果即出现问题const num1 = 90091992547409910;console.log(num1 + 1); //90091992547409900
//BigInt 计算结果正确const num2 = 90091992547409910n;console.log(num2 + 1n); //90091992547409911n
我们还可以使⽤ BigInt 对象来初始化 BigInt 实例：
console.log(BigInt(999)); // 999n 注意：没有 new 关键字
需要说明的是，BigInt 和 Number 是两种数据类型，不能直接进⾏四则运算，不过可以进⾏⽐较操作。
console.log(99n == 99); //trueconsole.log(99n === 99); //false console.log(99n + 1);//TypeError: Cannot mix BigInt and other types, use explicit conversion
07、顶层对象: globalThis
JS 中存在⼀个顶层对象，但是，顶层对象在各种实现⾥是不统⼀的。
从不同的 JavaScript 环境中获取全局对象需要不同的语句。在 Web 中，可以通过 window、self 取到全局对象，但是在 Web Workers 中，只有 self 可以。在 Node.js 中，它们都⽆法获取，必须使⽤ global。
var getGlobal = function () {    if (typeof self !== 'undefined') { return self; }    if (typeof window !== 'undefined') { return window; }    if (typeof global !== 'unde
ES2020 中引⼊ globalThis 作为顶层对象，在任何环境下，都可以简单的通过 globalThis 拿到顶层对象。
08、空值合并运算符
ES2020 新增了⼀个运算符 ??。当左侧的操作数为 null 或者 undefined时，返回其右侧操作数，否则返回左侧操作数。
在之前我们经常会使⽤ || 操作符，但是使⽤ || 操作符，当左侧的操作数为 0 、 null、 undefined、 NaN、 false、 '' 时，都会使⽤右侧
的操作数。如果使⽤ || 来为某些变量设置默认值，可能会遇到意料之外的⾏为。
操作符可以规避以上问题，它只有在左操作数是 null 或者是 undefined 时，才会返回右侧操作数。
const someValue = 0;const defaultValue = 100;let value = someValue ?? defaultValue; // someValue 为 0 ，value 的值是 0
09、可选链操作符
可选链操作符 ?. 允许读取位于连接对象链深处的属性的值，⽽不必明确验证链中的每个引⽤是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引⽤为空(nullish, 即 null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。
例如，我们要访问 info 对象的 animal 的 reptile 的 tortoise。但是我们不确定 animal, reptile 是否存在，因此我们需要这样写：
const tortoise = info.animal && ptile && ise;
因为 ptile 或  ptile 会抛出错误：TypeError: Cannot read property 'reptile' of undefined 或 TypeError: Cannot read property 'reptile' of null，为了避免报错，如果我们需要访问的属性更深，那么这个这句代码会越来越长。
有了可选链之后我们就可以简化：
const tortoise = info.animal?.reptile?.tortoise;
可以看到可选链操作符 ?. 和空位合并操作符⼀样，都是针对的 null 和 undefined 这两个值。
END
关注下⽅「前端开发博客」，回复 “电⼦书”
领取27本电⼦书
❤  看完两件事
如果你觉得这篇内容对你挺有启发，我想邀请你帮我两个⼩忙：
1. 点个「在看」，让更多的⼈也能看到这篇内容（喜欢不点在看，都是耍流氓 -_-）
2. 关注「前端开发博客」，每周重点攻克⼀个前端⾯试重难点，
3. 后台回复「电⼦书」即可免费获取 27本 精选的前端电⼦书！
点个在看⽀持我吧，转发就更好了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。