ES11新特性（promise.Allsettled,动态import,string.matchAll方法，BigInt类型和globalThis属性）

1. Promise.allSettled（）用于提取多个promise的值。

  //Promise.allSettled的返回情况永远是成功，返回值根据参数的返回值决定
  //Promise.all的返回状态跟随参数，参数的返回是reject,则失败
  //切记：all 和 allSettled的参数用数组

  <script>

      const p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("商品数据");
        }, 1000);
      });
      const p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
          reject("失败了");
        }, 1000);
      });

      const result1 = Promise.allSettled([p1, p2]);
      const result2 = Promise.all([p1, p2]);
      console.log(result1);
      console.log(result2);
      //Promise {<pending>}
      // [[Prototype]]: Promise
      // [[PromiseState]]: "fulfilled"
      // [[PromiseResult]]: Array(2)
      
      // Promise {<pending>}
      // [[Prototype]]: Promise
      // [[PromiseState]]: "rejected"
      // [[PromiseResult]]: "失败了"
    </script>

2.动态import()方法，参数为地址，返回的是promise类型，可以使用then方法，then方法的参数是暴露函数的结果。

//用GO live执行

    <button>点击</button>
    <script type="module">
      //ES6新增的import是静态的，不管是否使用先导入进来
      //ES11新增了import方法，返回的是promise类型

      //ES6静态引入------------------------------------------
      //   import * as h from "./hello.js";

      //   const btn = document.querySelector("button");
      //   btn.addEventListener("click", function () {
      //     h.hello();
      //   });

      //动态引入----------------------------------------------
      //then方法里面的参数module就是暴露函数里面的结果
      const btn = document.querySelector("button");
      btn.addEventListener("click", function () {
        import("./hello.js").then((module) => module.hello());
      });
    </script>

3.String.matchAll()方法用于提取循环的多个正则。

  //matchAll() 方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器
  //有迭代器也就是有next()函数，可以使用for of(使用matchAll方法需要node版本12以上)
  //match（）方法检索返回一个字符串匹配正则表达式的结果。

    <script>
 str = `<ul>
        <li>
            <a>肖申克的救赎</a>
            <p>上映日期</p>
        </li>
        <li>
            <a>阿甘正传</a>
            <p>上映日期</p>
        </li>
     </ul>`;

      const reg = /<li>.*?<a>(?<name>.*?)<\/a>.*?<p>(?<time>.*?)<\/p>/gs;
      //strig.matchAll()
      const result = str.matchAll(reg);
      for (let v of result) {
        console.log(v.groups.name);
        console.log(v.groups.time);
      }
      //string.match()//只能得到第一组
      const result1 = str.match(reg);
      console.log(result1);
      //.reg.exec()//需要与循环嵌套使用
      let result2;
      const data = [];
      while ((result2 = reg.exec(str))) {
        data.push({ name: result2.groups.name, time: result2.groups.time });
      }
      for (let v in data) {
        console.log(data[v]);
      }
    </script>

4.可选链操作符，BigInt类型和globalThis属性

（1）可选链操作符 ?.

      //?.用于确认需要使用的变量是否存在，简化&&运算
      //传统方式（打印实参须提前确认实参是否存在
      function main(config) {
        if (config && config.db && config.db.host) {
          const dbhost = config.db.host;
          console.log(dbhost);
        } else return false;
      }
      function main1(config) {
        if (config?.db?.host) {
          const dbhost = config.db.host;
          console.log(dbhost);
        }
      }
      main({
        db: {
          host: "127.0.0.1",
          username: "admin",
        },
      });
      main1({
        db: {
          host: "127.0.0.1",
          username: "admin",
        },
      });
    </script>

(2)BigInt和globalThis

    <script>
      //BigInt是一种大整型，只能转换整型，且只能同类型运算
      //可以在最大的整型上继续运算
      const p = BigInt(Number.MAX_SAFE_INTEGER);
      const p1 = p + BigInt(1);

      //全局属性 globalThis 包含全局的 this 值，类似于全局对象（global object）。
      //便于记忆，你只需要记住，全局作用域中的 this 就是 globalThis。
      console.log(p);
      console.log(p1);
    </script>