es6+新特性_基本语法

嘎嘎_膈

于 2023-05-08 22:46:56 发布

阅读量142

点赞数

文章标签： es6 javascript 前端

本文链接：https://blog.csdn.net/wanananhh/article/details/130569100

版权

这些HTML文件展示了JavaScript的一些新特性，包括数组的includes方法、幂运算、async/await、对象的扩展操作、Rest参数与Spread运算符、正则扩展以及Map和String的新增方法等。通过示例代码，解释了如何使用这些新功能来简化编程任务。

摘要由CSDN通过智能技术生成

1. 新特性_7.html

<!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>
    <script>
        //1.includes 某个判断值是否在数组中,传统的indexof太复杂
        const minzhu = ['西游记', '红楼梦', '三国演义', '水浒传'];
        console.log(minzhu.includes('西游记'));
        //2.幂运算，取代传统的Math.pow(2,10)
        console.log(2 ** 10);
    </script>
</body>

</html>

2. 新特性_8.html

<!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>
    <script>
        //1.async声明 返回值为Promise对象
        async function fnasync() {
            //即使返回的是字符串，但是也是隐式包装成Promise对象,状态为fulfilled，结果为hello
            //只要返回结果，就是Promise成功时的对象
            //抛出错误，染回就是Promise失败时的对象
            //返回Promise对象，就是Promise对象的状态结果
            return 'hello';
        }
        const result = fnasync();
        console.log(result);

        //2.await，必须放在async函数中，右边的表达式为Promise成功时候的值，要是出错则放到try...catch中
        async function fnasyncawait() {
            try {
                const p = await new Promise((resolve, reject) => {
                    resolve('success');
                    //reject('fild');
                });
                console.log(p);
                return p;
            } catch (e) {
                console.log(e);
            }

        }
        const resultawait = fnasyncawait();
        console.log(resultawait);

        //3.es8对象方法的扩展
        //3.1 声明
        const school={
            name:'尚硅谷',
            cities:['北京','上海','深圳'],
            xueke:['java','前端','大数据','运维']
        }
        console.log(school);
        //3.2 获取对象所有的键
        console.log(Object.keys(school));
        //3.3 获取对象所有的值
        console.log(Object.values(school));
        //3.4 entries，将对象中的值变成key,value形式方便存入Map中=》['cities', Array(3)]  “将对象转换为二维数组”
        console.log(Object.entries(school));
        //3.5 创建Map
        let map=new Map(Object.entries(school));
        console.log("map----------");
        console.log(map);
        console.log(map.get('name'));
        //3.6 对象属性的描述对象
        console.log(Object.getOwnPropertyDescriptors(school));
        //3.7 创建对象属性的描述对象
        let obj=Object.create(null,{ //第一个参数为原型对象
            name:{
                value:'学堂',
                writable:true,
                configurable:true,
                enumerable:true
            }
        });
        console.log(Object.getOwnPropertyDescriptors(obj));

    </script>
</body>

</html>

3. 新特性_9.html

<!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>
    <script>
        /*
        Rest参数与spread扩展运算符在es6时已经引用，不过只能针对数组操作
          在es9中为对象提供了向数组一样的rest参数和扩展运算符
        */
        //1.rest参数
        function connect({ host, port, ...user }) { //...username 意味将除了host和port外的数值都传递在此住
            console.log(host);
            console.log(port);
            console.log(user.username);
            console.log(user.password);
        }
        connect({
            host: '127.0.0.1',
            port: 3306,
            username: 'root',
            password: 'root'
        });

        //2.扩展运算符
        const skillOne={
            q:'天音波'
        }
        const skillTwo={
            w:'金钟罩'
        }
        const skillThree={
            e:'天音波'
        }
        const skillFour={
            r:'猛龙摆尾'
        }
        const mangseng={...skillOne,...skillTwo,...skillThree,...skillFour};
        console.log(mangseng);

        //3.正则扩展-命名捕获分组,分组匹配的结果做一个命名
        //。。。。。。

        //4.正则扩展-反向断言
        //。。。。。。

        //5.正则扩展-dotAll模式
        //。。。。。。


    </script>
</body>

</html>

4. 新特性_10.html

<!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>
    <script>
        //1.Object.formEntries 创建对象，传入一个二维数或map对象，对象的结果数值类似于Map  “将二维数组转换为(Map)对象”
        const result = Object.fromEntries([
            ['name', '学堂'],   //['name', '学堂','hello'],"hello"不会保存在对象中
            ['xueke', 'java,大数据,云计算'],    //['xueke', 'java,大数据,云计算'] ,同名的xueke只会保存第一个
        ]);
        console.log(result);
        console.log(Object.keys(result));

        //2.Map
        const map = new Map();
        map.set('name', '教育');
        console.log(map);
        const resultmap = Object.fromEntries(map);
        console.log(resultmap);

        //3.entries， “将对象转换为二维数组”
        const school = {
            name: '尚硅谷',
            cities: ['北京', '上海', '深圳'],
            xueke: ['java', '前端', '大数据', '运维']
        }
        console.log(Object.entries(school));

        //注1：定义Map时传递的值为二维数组，恰好可以通过Object.entries()方法将对象转为二维数组传递给Map
        //注2：将二维数组或者Map转化为对象，恰好可以通过Object.fromEntries()方法进行实现,只有是[[key1:value1],[key2,value2]]形式才可以

        //4.字符串的扩展方法-trimStart,trimEnd  原始使用trim清除首位的空格
        let str = '   helllo word  ';
        let strts = str.trimStart();
        console.log(strts);
        let stres = str.trimEnd();
        console.log(stres);

        //5.数组方法扩展-flat与flatMap
        //5.1 flat将多维数组转化为低维数组 3->2,2->1
        const arr=[1,2,3,4,[5,[7,8]]];
        console.log(arr.flat());  //将三维转为二维，若将三维转为一维只需要将arr.flat()函数中传递一个2(深度) =》arr.flat(2)   默认深度为1
        //5.2 flatMap 将map维度降低
        const arrmap=[1,2,3,4];
        const resultflatmap=arrmap.flatMap(item=>[item*10]);
        console.log(resultflatmap);

        //6.Symbol.prototype.description 获取Symbol的字符串描述
        let s=Symbol('教育界');
        console.log(s.description);

    </script>
</body>

</html>

5. 新特性_11.html

<!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>
    <script>
        //1.私有属性
        class Person {
            //公有属性
            name;
            //私有属性
            #age;
            #weight;
            //构造方法
            constructor(name, age, weight) {
                this.name = name;
                this.#age = age;
                this.#weight = weight;
            }
            getter() {
                console.log(girl.name);
                console.log(girl.#age);
                console.log(girl.#weight);
            }
        }
        const girl = new Person('刘颖', 18, '45Kg');
        console.log(girl);
        girl.getter();

        //2.Promise.allSettled方法，接收Promise数组，返回Promise对象,里面形式[{}，{}]，但是返回的状态永远是成功的状态，
        //值为每个Promise执行后的的值（失败和成功都有都放在数组中）
        const p1 = new Promise((resolve, reject) => {
            resolve('成功');
        });
        const p2 = new Promise((resolve, reject) => {
            resolve('success');
        });
        const p3 = new Promise((resolve, reject) => {
            reject('失败');
        });
        const resultPA = Promise.allSettled([p1, p2, p3]);
        console.log(resultPA);

        //3.Promise.all(arr) 都成功则返回成功时后的状态，值为成功时的值组成的数组，有一个失败则返回失败的值和状态
        const resultPAll = Promise.all([p1, p2]);
        console.log(resultPAll);

    </script>
</body>

</html>