第一章：ES11基础---新特性

一：String.prototype.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);

        // for(let v of result){
        //     console.log(v);
        // }

        const arr = [...result];

        console.log(arr);

二：类的私有属性

        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('张三', 18, '60kg');

        // console.log(boy.name);
        // console.log(boy.#age);
        // console.log(boy.#weight);

        boy.intro();

三：Promise.allSettled

Promise.allSettled返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带

有一个对象数组，每个对象表示对应的promise结果。

//声明两个promise对象
        const p1 = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve('商品数据 - 1');
            },1000)
        });

        const p2 = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve('商品数据 - 2');
                // reject('出错啦!');
            },1000)
        });

        调用 allsettled 方法
         const result = Promise.allSettled([p1, p2]);
        
         const res = Promise.all([p1, p2]);

        console.log(res);

四：可选链操作符（?.）

允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符

的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下

不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存

在，则返回 undefined。

        function main(config){
            // const dbHost = config && config.db && config.db.host;
            const dbHost = config?.db?.host;

            console.log(dbHost);
        }

        main({
            db: {
                host:'192.168.1.100',
                username: 'root'
            },
            cache: {
                host: '192.168.1.200',
                username:'admin'
            }
        })

五：动态 import 导入

//静态导入，不管用不用都直接导入

 import * as m1 from "路径";


//获取元素
const btn = document.getElementById('btn');

btn.onclick = function(){
//动态导入，只在使用是导入，大大增强了代码的加载效率
    
import('路径').then(module => {
        module.XXX();
    });
}

六：globalThis 对象

全局属性 globalThis 包含全局的 this 值，始终指向全局对象