7个ECMAScript 11的新特性，你需要了解一下

约定不等于承诺〃 2022-09-11 13:19 182阅读 0赞

![72e1bb75bcdec19e338b92a979f0e1c9.png][]

##     ##

## **1、String.prototype.matchAll** ##

// matchAll 用于字符串批量匹配正则, 返回一个 可迭代对象
    let str = `
            <ul>
                <li>
                    <a>肖生克的救赎</a>
                    <p>上映日期: 1994-09-10</p>
                </li>
                    <li>
                    <a>阿甘正传</a>
                    <p>上映日期: 1994-07-06</p>
                </li>
            </ul>`;
    
    
    // 声明正则
    const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg;
    
    
    // 调用方法
    const result = str.matchAll(reg);
    
    
    const arr = [...result];
    console.log(arr);

## **2、类的私有属性** ##

class Person {
          // 公有属性
          name;
          // 私有属性
          #age;
          #weight
          constructor(name,age,weight) {
              this.name = name;
              this.#age = age;
              this.#weight - weight;
          }
          intro(){
              console.log(this.name);
              console.log(this.#age);
         console.log(this.#weight);
      }
    }
    
    
    const boy = new Person('张三',22,'80kg');
    console.log(boy.name);
    // Uncaught SyntaxError: Private field '#age' must be declared in an enclosing class
    // console.log(boy.#age);
    // console.log(boy.#weight);
    
    
    boy.intro();

## **3、Promise.allSettled** ##

// Promise.allSettled()不管参数中的promise是fulfilled还是rejected，都会等参数中的实例都返回结果，包装实例才会结束。
    
    
     // 声明两个promise对象
    const p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('商品数据 -1');
        }, 1000)
    });
    
    
    const p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('出错啦');
        }, 1000)
    });
    
    
    // 调用 allSettled 方法
    const result = Promise.allSettled([p1,p2]);
    console.log(result);
    /*
    Promise {<pending>}
        __proto__: Promise
        [[PromiseState]]: "fulfilled"
        [[PromiseResult]]: Array(2)
        0: {status: "fulfilled", value: "商品数据 -1"}
        1: {status: "rejected", reason: "出错啦"}
        length: 2
        __proto__: Array(0)
    */

## **4、可选链操作符** ##

// 项目中经常会遇到深层次嵌套属性的验证，我们所能做的就是通过&&每层依次验证，这样看起来代码很繁琐，但又不得不这样做。
    // 为了简化代码, 使用" ?. "可选链式操作符, 会自动检测 ? 前面的对象是否存;  存在 则调用 , 不存在 则为 undefined
    function main(config){
      // const dbHost = config && config.db && config.db.host;
      const dbHost = config?.db?.host;
      console.log(dbHost); // 192.168.1.100
    }
    
    
    main({
      db:{
        host:'192.168.1.100',
        user:'root'
      },
      cache:{
        host:'192.168.1.200',
        user:'admin'
      }
    });

## **5、动态 import 导入** ##

// 动态 import ,用于模块懒加载, 用到一个模块的时候再加载, 没用到就不加载
    // 使用 improt(路径) 方法, 返回一个promise 对象
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <button id="btn">点击按钮</button>
    
    
    </body>
    <script>
        let btn = document.getElementById('btn');
        btn.onclick = function(){
            import('./34.ES11-动态import.js').then(module=>{
                console.log(module);
                module.hello();
            });
        }
    </script>
    </html>
    
    
    // 34.ES11-动态import.js
    export function hello() {
        console.log('hello');
    }

## **6、bigInt** ##

用于大数值运算。

// 大整型
    let n = 123n;
    console.log(n, typeof (n)); // 123n "bigint"
    
    
    // 函数
    let n2 = 123;
    console.log(BigInt(n2)); // 123n
    // console.log(BigInt(1.2)); //报错
    
    
    // 大数值运算
    let max = Number.MAX_SAFE_INTEGER;
    console.log(max); // 9007199254740991
    console.log(max + 1); // 9007199254740992
    console.log(max + 2); // 9007199254740992
    
    
    console.log(BigInt(max)); //9007199254740991n
    console.log(BigInt(max) + 1n); // 9007199254740992n
    console.log(BigInt(max) + 2n); //9007199254740993n

## **7、 globalThis 对象** ##

// global 是一个变量, 永远指向顶级对象
    
    
    // 在js中 
       console.log(globalThis); // window
    
    
    // 在node中
       console.log(globalThis); // global

#  #

**学习更多技能**

**请点击下方公众号**

![8bc7af92c76b8c6bbb4f13fd971b9d6c.gif][]

![20e5b5d288fba8d8bf8150d3a048fe14.png][]

![fc9fc5d4e686dfb3d173c0a58f2f4ec1.png][]

[72e1bb75bcdec19e338b92a979f0e1c9.png]: /images/20220828/2fd5e7c1897e485a8bace2a6982f2dfb.png
[8bc7af92c76b8c6bbb4f13fd971b9d6c.gif]: /images/20220828/72798c04bac94705987e32005b3a9ac3.png
[20e5b5d288fba8d8bf8150d3a048fe14.png]: /images/20220828/fbe92f1934c742c1b3e661b8222e5197.png
[fc9fc5d4e686dfb3d173c0a58f2f4ec1.png]: /images/20220828/496dc55c6f6143d397b55a532b26a65d.png