提交

source/_posts/ES11新特性.md

+```javascript
+title: Map和WeakMap        
+date: 2022/10/31 18:00:00
+author: 张润
+```
+
+### 1、class类的私有变量
+
+在ES11 之前js是没有class类的私有变量的概念, 我们程序员一般使用 '_' 开始符号代表了私有变量,列如 _name 代表了class类中name属性为私有的,而Typescript使用private 前缀代表私有属性或者方法. ES11 中使用# 代表类中的属性为私有变量.
+
+```javascript
+daclass Dog {
+  #name = 'owen'
+  age = 18
+  getInfo(){
+    console.log(`dog name is ${this.#name} age is ${this.age}`)
+  }
+}
+
+const dogInstance = new Dog() // dog name is owen age is 18
+
+dogInstance.getInfo()
+console.log(dogInstance.#name) // Uncaught SyntaxError: Private field
+'#name' must be declared in an enclosing class
+```
+
+### 2、Promise.allSettled
+
+ES6引入Promise以来, Promise支持的组合型传入类型的方法只有: promise.all 和promise.race , 而这两种方法都会因为 当promise被reject或者报错的时候发生短路,导致之后的promise不会执行. 引入了Promise.allSettled之后,无论promise数组中任何一个promise状态是reslove还是reject,都会执行完毕,最后返回一个状态数组.
+
+```javascript
+const promise1 = new Promise((reslove,reject)=>{
+  setTimeout(()=>{
+    reslove('promise success')
+  },1000)
+})
+const promise2 = new Promise((reslove,reject)=>{
+  setTimeout(()=>{
+    reject('promise fail')
+  },1000)
+})
+
+const proResult = Promise.allSettled([promise1,promise2]).then(data=> {
+  console.log(data)
+})
+/*
+[
+  { status: 'fulfilled', value: 'promise success' },
+  { status: 'rejected', reason: 'promise fail' }
+]
+*/
+```
+
+### 3、String.prototye.matchAll
+
+语法: str.machAll(reg)
+给定一个字符串和一个正则表达式,machAll可以返回所有的与该字符串匹配正则结果的迭代器.下面是mach() 和 machAll() 的对比
+
+- 注意:   Reg正则必须是设置了全局模式g的形式，否则会抛出异常TypeError
+
+```javascript
+const reg = /name(\d?)/g
+const nameGroup = 'name1name2,name3'
+console.log(nameGroup.match(reg))
+ // [ 'name1', 'name2', 'name3' ]
+console.log(nameGroup.matchAll(reg))
+// Object [RegExp String Iterator] {}
+console.log(...nameGroup.matchAll(reg))
+/*
+[
+  'name1',
+  '1',
+  index: 0,
+  input: 'name1name2,name3',
+  groups: undefined
+] [
+  'name2',
+  '2',
+  index: 5,
+  input: 'name1name2,name3',
+  groups: undefined
+] [
+  'name3',
+  '3',
+  index: 11,
+  input: 'name1name2,name3',
+  groups: undefined
+]
+*/
+```
+
+### 4、BigInt任意精度的整数
+
+JavaScript对数字大小有严格的固定限制范围, 当大于2的53次方的时候精度就会消失,举个简单的例子:
+
+```javascript
+console.log(2**53) // 9007199254740992
+console.log(2**53 === 2**53 + 1) // true
+```
+
+Biglnt是一种新的数据类型,所以现在js有八种数据类型了 分别是:
+
+- number
+- string
+- boolean
+- null
+- undefined
+- symbol
+- object
+- bigInt
+
+BigInt 产生原因是为了解决js中超过2**53 - 1 的整数精度失效问题. 要创建BigInt只需要在数字的末尾加上一个 'n' 即可. 如下示例:
+
+```javascript
+constbigNumber = 900719925474099211n
+console.log(bigNumber + 1n) // 900719925474099212n
+
+console.log(bigNumber + 1)
+ // TypeError: Cannot mix BigInt and other types, use explicit conversions
+```
+
+注意BigInt 类型无法跟Number类型互相运算.
+
+### 5、空值合并运算符??
+
+对TypeScript了解的人,大概很早就开始使用??号符号. 在ES11 新特性之后,?? 号符号可以在我们直接书写js时候使用. 当我们要判断某个对象的属性不存在那么就取另外一个对象的时候,列如以下情况:
+
+```javascript
+const obj = {
+  a: 1,
+  b: 0
+}
+console.log(obj.a || 3) // 1
+console.log(obj.b || 3) // 3
+```
+
+如果我们只是想判断obj对象中有那个属性然后取值属性值,没有的话就取值为3 ,这里就会需要多余的判断. 为了避免这种运算,我们使用?? 运算符
+
+```javascript
+console.log(obj.a ?? 3) // 1
+console.log(obj.b ?? 3) // 0
+```
+
+解析: 空值运算符检查所有值的属性是否为undefined或null。如果不是null或undefined，它将返回初始值，否则将返回??后面的值。
+
+### 6、按需获取动态import
+
+同样TypeScript 也已经有了这个运算符,当我们有如下一个对象:
+
+众所周知,ES Module是一种静态加载模块,静态体现在如下信息:
+
+- 静态模块: import/export声明只能出现在顶层作用域，不支持按需加载、懒加载
+- 静态标识: 模块标识只能是字符串字面量，不支持运行时动态计算而来的模块名
+
+严格的静态加载,有益于基于源码的静态分析,编译优化,但也同时存在以下的问题:
+
+- 首屏需要加载所有import引入的模块,不利于首屏优化
+- 模块较多的时候难以确定每个模块加载的含义
+- 仅在特殊情况下需要加载的模块,首次就直接加载影响性能优化.
+
+针对于此, ES11 添加新特性 获取动态import:
+
+```javascript
+import(specifier)
+```
+
+import函数传入参数模块标识specifier ,返回promise,列如以下示例:
+
+```javascript
+// lib.js
+function add(a, b) {
+return a + b
+}
+exports.add = add
+exports.test = 1
+// main.js
+const loadAdd = () => {
+  import('./lib.js').then(res=>{
+    console.log(res.default.add) // [Function: add]
+    console.log(res.default.test) // 1
+  })
+}
+loadAdd()
+```
+
+### 7、globalThis
+
+ES11 在语言标准的层面，引入globalThis作为顶层对象。也就是说，任何环境下，globalThis都是存在的，都可以从它拿到顶层对象，指向全局环境下的this。
+
+列如:
+
+- 在浏览器中它是 window
+- 在 worker 中它是 self
+- 在 Node.js 中它是global ...... 所以在ES11之后在任何情况下使用globalThis 都能拿到其顶层对象