ES6学习笔记（第五天）

ES6学习笔记（第五天）

1.ES9的新特性

1.1对象展开

Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符

//rest 参数
// ES6中引入rest参数(形式为'...变量名')，用于获取函数的多余参数。rest参数之后不能再有其他参数(即只
// 能是最后一个参数)。
        function connect({host, port, ...user}){
            console.log(host);
            console.log(port);
            console.log(user);
        }

        connect({
            host: '127.0.0.1',
            port: 3306,
            username: 'root',
            password: 'root',
            type: 'master'
        });
        // 127.0.0.1
        // 3306
        // {username: 'root', password: 'root', type: 'master'}

//对象合并
        const skillOne = {
            q: 'wwh',
            w: 'wxh'
        }
        console.log({...skillOne});
        // ...skillOne   =>  q: 'wwh', w: 'wxh'
        //一定要有大括号，只能作为对象的属性以对象输出
        const skillTwo = {
            w: 'wxh'
        }

        const skillThree = {
            e: 'cxj'
        }
        const skillFour = {
            r: 'thy'
        }
        const mangseng = {...skillOne, ...skillTwo, ...skillThree, ...skillFour};
        console.log(mangseng)
        //{q: 'wwh', w: 'wxh', e: 'cxj', r: 'thy'}

1.2正则扩展

这一段是在讲es在正则中的用法，不懂的快去补。

1.2.1命名捕获分组

以前的命名捕获

//   声明一个字符串
        let str = '<a href="http://www.atguigu.com">wwh</a>';

        //提取 url 与 『标签文本』
        //（.*）是通配这个范围里的文本的意思
        const reg = /<a href="(.*)">(.*)<\/a>/;

        //执行
        const result = reg.exec(str);

        console.log(result);//输出的是一个数组，数组里的groups属性为underfined
        //Array(3)
        // 0: "<a href=\"http://www.atguigu.com\">wwh</a>"
        // 1: "http://www.atguigu.com"
        // 2: "wwh"

分组命名

        let str = '<a href="http://www.atguigu.com">尚硅谷</a>';
        //分组命名
        const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;

        const result = reg.exec(str);
        //捕获到的内容分别命名为url和text，被放到了groups下面
        console.log(result.groups.url);//http://www.atguigu.com

        console.log(result.groups.text);//尚硅谷

1.2.2断言

  //声明字符串
        let str = 'JS5211314你知道么555啦啦啦';
        //正向断言
        //截取几个数字，数字的后面有字符啦就符合条件，截取
        const reg = /\d+(?=啦)/;
        const result = reg.exec(str);
        console.log(result);//['555', index: 13, input: 'JS5211314你知道么555啦啦啦', groups: undefined]

        //反向断言
        //判断这个数字的前面是否有字符么，有就符合条件，截取
        const reg1 = /(?<=么)\d+/;
        const result1 = reg1.exec(str);
        console.log(result1);//['555', index: 13, input: 'JS5211314你知道么555啦啦啦', groups: undefined]

1.2.3 dotALL模式

        //dot本身就有点的意思  .  元字符  除换行符以外的任意单个字符
        //需求：把ul里面的电影名称和上映日期选择出来
        let str = `
        <ul>
            <li>
                <a>肖生克的救赎</a>
                <p>上映日期: 1994-09-10</p>
            </li>
            <li>
                <a>阿甘正传</a>
                <p>上映日期: 1994-07-06</p>
            </li>
        </ul>`;
    //之前声明正则，这种情况下要把换行也考虑进内，如果很多就要疯狂加\s
        // const reg = /<li>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/;
    //现在有dotALL模式之后，多了一个模式修正符s之后.能匹配任意字符，包括换行符
    //gs是全局匹配
    //单个s是单个匹配
        const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
        //执行匹配
        // const result = reg.exec(str);
        let result;
        let data = [];
        while(result = reg.exec(str)){
            data.push({title: result[1], time: result[2]});
        }
        //输出结果
        console.log(data);

2.ES10新特性

2.1对象扩展方法Object.fromEntries

Object.fromEntries创建一个对象，但是它的参数有点特别一种是二维数组，另外一种是Map(一种数据结构，但其实也是一个对象).

 // 二维数组
        const result = Object.fromEntries([
            ['name','wxh'],
            ['xueke', '前端，首席程序员']
        ]);
        console.log(result);//{name: 'wxh', xueke: '前端，首席程序员'}

// Map
        const m = new Map();
        m.set('name','wwh');
        const result1 = Object.fromEntries(m);
        console.log(result1);//{name: 'wwh'}

//有点熟悉是因为之前在ES8中有类似的方法
//Object.entries ES8 可以将一个对象转化为二维数组，和今天这个互为逆运算
        const arr = Object.entries({
            name: "尚硅谷"
        })
        console.log(arr);//[Array(2)]
                            // 0: (2) ['name', 'wwh']
                            // length: 1

2.2trimStart与trimEnd

之前ES5中字符串就有一个trim，用于清除字符串两边的字符
而trimStart用于清除字符串左边的字符
而trimEnd用于清除字符串右边的字符

   let str = '   iloveyou   ';

        console.log(str);
        console.log(str.trimStart());
        console.log(str.trimEnd());

2.3Array.prototype.flat与flatMap

这是ES10数组的两个方法，flat本身有平的意思

//  flat 
        // 将多维数组转化为低位数组
        const arr2 = [1,2,3,4,[5,6]];
        const arr3 = [1,2,3,4,[5,6,[7,8,9]]];
        // 参数为深度，也就是数组打开的层数，是一个数字
        console.log(arr2.flat())//[1, 2, 3, 4, 5, 6]
        //三维变一维
        console.log(arr3.flat(2));//[1, 2, 3, 4, 5, 6, 7, 8, 9]  
//flatMap
        const arr = [1,2,3,4];
        const result = arr.flatMap(item => [item * 10]);
        console.log(result);//[10, 20, 30, 40]

2.4Symbol.prototype.description

Symbol.prototype.description这个属性用于获取Symbol的描述字符串

//创建 Symbol
        let s = Symbol('wwh');
        console.log(s);//Symbol(wwh)
        console.log(s.description);//wwh

3.ES11新特性

3.1私有属性

对对象的属性进行封装，不允许其他人随便访问

       class Person{
            //公有属性
            name;
            //私有属性
            #age;
            #weight;
            //构造方法
            constructor(name, age, weight){
                this.name = name;
                this.#age = age;
                this.#weight = weight;
            }

            intro(){
                console.log(this.#weight);
            }
        }

        //实例化
        const girl = new Person('wwh', 18, '45kg');

        console.log(girl.#weight);//报错，在类外不可以访问
        girl.intro();//可以访问

3.2Promise.allSettled

这个方法接受一个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]);
        console.log(result);
        
        //这个方法要两个都成功才行
        // const res = Promise.all([p1, p2]);

        // console.log(res);

3.3String.prototype.matchAll

用于正则匹配批量的一个结果;没有这个之前都是用while循环来搞的

        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...of打开
        // for(let v of result){
        //     console.log(v);
        // }
        
        //也可以用扩展运算符
        const arr = [...result];
        console.log(arr);

3.4可选链操作符

?. 在对象层级比较多的时候判断前面一层有没有

        function main(config){
            //没有?.之前，我们要获取db中的属性host要先判断有没有confug,有没有db,在判断有没有host,这样用&&太麻烦了，而且最后找不到直接报错
            // const dbHost = config && config.db && config.db.host;
            
            //有了?.之后可以这样写，意思是判断有没有confug,有，就再判断有没有config里的db,有，再判断有没有db里的host，就算最后找不到也是返回underfined
            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'
            }
        })

3.5动态import加载

之前ES6的入口文件app.js中不管模块是先用上还是后面才用，反正就是一股脑的放在前面写着（静态引入），这样会拖慢加载。
而ES11提供的动态import加载可以做到按需加载（用到的时候才引入某模块）

html文件

    <button id="btn">点击</button>
    <script src="./js/app.js" type="module"></script>

app.js文件

//之前的静态引入：
//    import * as m1 from "./hello.js"

//获取元素
const btn=document.getElementByLd('btn')
btn.onclick=function(){
    //动态引入
    import('./hello,js').then(module =>{
        module.hello()
    })
}

hello.js文件

export function hello(){
    alert('hello!')
}

3.6 BigInt

用来更大的数值运算

    //是一个大整型
        //表示方式在后面加一个n
        let n = 521n;
        console.log(n, typeof(n));//521n 'bigint'

    //是一个函数
        let n1 = 123;
        console.log(BigInt(n1));//123n
        //不能使用其他类型来转换，下面这个会报错
        // console.log(BigInt(1.2));

    //用于大数值运算
    //Number.MAX_SAFE_INTEGER表示最大安全整数
        let max = Number.MAX_SAFE_INTEGER;
        console.log(max);//9007199254740991
        console.log(max + 1);//9007199254740992
        console.log(max + 2);//还是9007199254740992，这里就会有问题
        //这是就可以借助Bigint
        console.log(BigInt(max))//9007199254740991n
        //必须都是大整型才可以运算
        console.log(BigInt(max) + BigInt(1))//9007199254740992n
        console.log(BigInt(max) + BigInt(2))//9007199254740993n

3.7globalThis

ES11引入的特殊变量，字面意思是全局的this,它始终是指向全局变量的，不管是什么环境。写代码时如果想对全局变量操作就可以用这个。
在window的html中

console.log(globalThis);//Window对象

在node.js中

console.log(globalThis);
//<ref *1> Object [global]