ECMAScript2020【ES11】使用教程

---

ES11 新特性 目录

1. 声明扩展：globalThis全局对象
2. 对象扩展：可选链式调用、空值合并运算符
3. 正则扩展：matchAll匹配所有项
4. 数值扩展：BigInt大整数
5. Module扩展：import()动态导入、补充export * as ns from 'module’在模块内使用的专用语法、 import.meta。
6. Iterator扩展：for……in遍历顺序标准化
7. Promise扩展：Promise.allSettled

---

ES11 新特性详细介绍

1. 声明扩展

1.1 globalThis 全局对象

作为顶层对象，指向全局环境下的this

背景

JavaScript 在不同环境中运行，顶层对象表示不一致，现统一为globalThis。

Browser：顶层对象是window
Node：顶层对象是global
WebWorker：顶层对象是self
以上三者：通用顶层对象是globalThis

2. 对象扩展

2.1 可选链式调用【?.】

适用情景

1. 访问对象属性
2. 访问数组
3. 函数调用

应用示例

TypeError: Cannot read property ‘x’ of undefined
//这个错误表示我们正在访问一个不属于对象的属性。

项目中经常要去访问对象的属性，有的属性嵌套了很多层

let obj: {
   
    data: {
   
      childs: {
   name: 'Alen'},
      fa: null
    }
}
console.log(obj.data.childs.name) // 正常运行，返回‘Alen’
console.log(obj.data.fa.name) //TypeError: Cannot read property 'name' of null

在这种情况下，JavaScript 引擎会这样抛出错误，并且导致白屏，页面挂了，意思就是访问obj.data.fa.name的时候首先要确保路径是已定义的，即obj.data.fa，obj.data，obj都已定义。

以前的处理方式： console.log(obj && obj.data && obj.data.fa && obj.data.fa.name) //代码量多，繁冗

ES2020可选链式操作符：console.log(obj.data.fa?.name)。如果没有值，应该返回 undefined。
访问数组\函数调用示例如下。

//访问数组
let arr =  ['boy', 'girl']
console.log(arr[1]) // 输出：girl
flowers = null;
console.log(arr[1]) // TypeError: Cannot read property '1' of null
console.log(arr?.[1]) // 输出：undefined

//调用函数
let fun = () => {
   
  return 'I am a function'
}

console.log(fun()) // 输出：I am a function

fun = null

console.log(fun()) // 抛出错误：TypeError: fun is not a function

console.log(fun?.