明天周末,,,,今天先把ES11分享了

123 阅读3分钟

1、matchAll()

matchAll() 方法返回一个包含所有匹配正则表达式的结果的迭代器。可以使用 for...of 遍历,或者使用 展开运算符(...) 或者 Array.from 转换为数组.

image.png

2、import()

import 标准的用法是导入的模块是静态的,会使所有被带入的模块在加载时就被编译,无法做到按需加载编译,降低了首页的加载速度。在某些场景中,你可能希望根据条件导入模块,或者按需导入模块,这是就可以使用动态导入代替静态导入。

image.png 且 import()返回的是一个promise对象

3、import.meta

import.meta对象是由ECMAScript实现的,它带有一个null的原型对象。这个对象可以扩展,并且它的属性都是可写,可配置和可枚举的。

<script type="module" src="my-module.mjs"></script>
....
console.log(import.meta);
// { url: "file:///home/user/my-module.mjs" }

该方法的使用需要在项目中进行安装配置,首先需要下载 @open-wc/webpack-import-meta-loader

image.png

4、export * as ns from 'module'

export * as ns from 'module' 并不会真的导入模块,因此在该模块中无法使用 ns

image.png

5、Promise.allSettled()

Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise,并带有一个对象数组,每个对象表示对应的promise结果.有多个彼此不依赖的异步任务成功完成时或者想知道每个promise的结果时,通常使用使用这种方法。

image.png status是 fulfilled,那么改对象的另一个属性是 value ,则是该Promise成功后的结果。

status是 rejected,那么对象的另一个属性是 reason,则是该Promise失败的原因

6、BigInt()新的数据类型

BigInt 是一种数字类型的数据,它可以表示任意精度格式的整数。

之前,JS中所支持的最大数字精度是[2^53-1],超过这个精度即无法正确显示。 大于或等于2的1024次方的数值,JS 无法表示,会返回 Infinity。

BigInt 只用来表示整数,没有位数的限制,任何位数的整数都可以精确表示。为了和 Number 类型进行区分,BigInt 类型的数据必须添加后缀 n。

image.png

BigInt 和 Number 是两种数据类型,不能直接进行四则运算,不过可以进行比较操作。

image.png

7、GlobalThis

JS 中存在一个顶层对象,但是,顶层对象在各种实现里是不统一的。引入 globalThis 作为顶层对象,在任何环境下,都可以简单的通过 globalThis 拿到顶层对象。

image.png

8、??空值运算符

当左侧的操作数为 null 或者 undefined时,返回其右侧操作数,否则返回左侧操作。

image.png

9、?可选链操作符

允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符,不同之处在于,在引用为空(nullish, 即 null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 undefined。

例如访问person对象的name的age时或者更长时,不确定该属性是否存在

const result = person.name?.age?.skill....