ES6新特性

一、let和const的定义

<!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>
        var name = "千岛";
        var link = "https://notre1024.lofter.com"
        var PI = Math.PI;

        console.log(name);
        console.log(link);
        console.log(PI);

        let name2 = "千岛";
        let link2 = "https://notre1024.lofter.com"
        const PI2 = Math.PI;

        console.log(name2);
        console.log(link2);
        console.log(PI2);

    </script>
</body>

</html>

二、let-const-var的区别

<!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>
        for (var i = 0; i < 5; i++) {
            console.log(i);
        }
        console.log(i);

        for (let k = 0; k < 5; k++) {
            console.log(k);
        }
        console.log(k); //错误

        const pi = Math.PI;
        pi = 88;    //错误
        console.log(pi);
    </script>

</body>

</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>

        var people = {
            name: 'konan',
            age: 20,
            sex: '男'
        };

        var message = "你好" + people.name + ",你今年" + people.age + "岁了" + ",你的性别是" + people.sex;
        console.log(message);

        //es6支持换行
        var message =`你好${people.name},
                        你今年${people.age}岁了,你的性别是${people.sex+5}`;
        console.log(message);

    </script>

</body>

</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>
         function sum(a,b=50){
             return a+b;
         }

         var result=sum(100,80);   //不传的参数默认是undefined,可以在函数中指定默认值,当然，这里传递的优先
         console.log(result);


         //不定参数
         function fun(...values){
             console.log(values);
         }

         fun(1,2,4);
         fun(3,5,6,7,7);
    </script>
    
</body>
</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>
        //原
        var sum = function (a, b) {
            return a + b;
        }

        //箭头函数 - 改进1
        var sum = (a, b) => {
            return a + b;
        }

        //箭头函数 - 改进2
        var sum = (a, b) => a + b;

        //规律
        //1.去掉function
        //2.在括号后面加箭头
        //3.如果逻辑代码仅有return可以直接省去，如果有逻辑体就不能省去，比如
        var sum2 = (a, b) => {
            var num = a + b;
            return num;
        }
        

        //举例
        var arr=[1,2,3,4,5,6,7];
    
        var newarr=arr.map(function(obj){
            return obj*2;
        });
        console.log(newarr);

        var newarr2=arr.map((obj)=>obj*2);
        console.log(newarr2);
    </script>

</body>

</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>
        //原
        let info={
            title:'端午节',
            link:'blog.csdn.net/m0_57538148',
            go:function(){
                console.log(`${info.title}节，赛龙舟`);
            }
        }

        //es6简写
        //因为对象是key:value存在
        //1:如果key和变量的名字一致，可以只定义一次即可
        //2:如果value是一个函数，可以把`:function`去掉，只留下()即可
        let title="端午节";
        let link="blog.csdn.net/m0_57538148";
        let info2={
            title,
            link,
            go(){
                console.log(`${info.title}，赛龙舟`);
            }
        }
        console.log(info2);
        console.log(info2.title);
        console.log(info2.link);
        info2.go();
        
        
    </script>

</body>
</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>

    <form action="#">
        <p>账号：<input type="text" id="account"></p>
        <p>密码：<input type="password" id="password"></p>
        <p><input type="button" value="登录" id="loginbtn"></p>
    </form>

    <script>
        // document.getElementById("loginbtn").onclick = function () {}
        $("#loginbtn").on("click",()=>{
            let account=$("#account").val();
            let password=$("#password").val();
            //对象简写应用场景
            let params={account,password};
            //发送异步请求
            $ajax({
                type:"post",
                url:"xxx",
                data:params,
                success(){

                }
            });
        })
    </script>

</body>

</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>
        // let title="端午节";
        // let link="blog.csdn.net/m0_57538148";
        let info={
            title:"端午节",
            link:"blog.csdn.net/m0_57538148",
            go(){
                console.log(`${info.title}，赛龙舟`);
            }
        }

        //通过.的方式
        console.log(info.title);
        info.go();

        //通过[]的方式
        console.log(info["title"]);
        console.log(info["link"]);
        info["go"]();

        //es6对象解构 - 快速获取属性和方法的一种形式
        let {title:abc,link,go}=info;
        //原
        //let title = info.title;
        //let link = info.link;
        console.log(abc,link);
        go();

        //字符串Api
        let str = "hello,vue";
        console.log(str.startsWith("hello"));
        console.log(str.endsWith("vue")); 
        console.log(str.includes("e"));
        console.log(str.includes("hell"))

        //Object方法
        console.log(Object.keys(info));
        console.log(Object.values(info));
        console.log(Object.entries(info));

        const targer={a:1};
        const targer1={b:2};
        const targer2={c:4};
        Object.assign(targer,targer1,targer2);  //合并到target
        console.log(targer);

        //扩展运算符
        //1、拷贝对象（深拷贝）
        let person1 = {name:"konan",age:3}
        let someone = {...person1}
        console.log(someone);

        //2、合并对象
        let age = {age:15,sex:'男'}
        let name = {name:"qiandao",age:5}
        let person2 = {...age,...name}  //如果两个对象的字段名重复，后面对象字段会覆盖前面的
        console.log(person2);

    </script>
    
</body>
</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>
        var person = {
            name:'千岛',
            address:'你好西安',
            link:'http://myip.ipip.net',
            go(){
                console.log("学习前端啦...");
            }
        }

        //解构出来
        var {name,address,...person2}=person;
        console.log(name);
        console.log(address);
        console.log(person2);
    </script>
    
</body>
</html>

九、数组map

<!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>

        let arr = [1, 2, 3, 4, 5, 6];
        //原
        for (let i = 0; i < arr.length; i++) {
            arr[i] = arr[i] * 2;
        }
        console.log(arr);

        //新 map自带循环♻️，会把处理的值回填到对应的位置
        let newarr = arr.map(ele=>ele*2);
        console.log(newarr);

        let users = [{age:10,name:'小千'},{age:12,name:'小岛'},{age:14,name:'小明'}];
        let newusers=users.map(ele=>{
            ele.age=ele.age+1;
            if(ele.age>12){     
                ele.sex='男';
            }else{
                ele.sex='女';
            }
            ele.cat='小花'; //可以增加字段
            return ele;
        });
        console.log(newusers);
    </script>

</body>

</html>

十、数组reduce

<!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>
        let arr = [1,2,3,4,5,6,7,8,9,10];
        
        let result0 = arr.reduce(function(a,b){
            return a+b;
        });
        console.log(result0);
        
        let result = arr.reduce((a,b)=>a+b);
        console.log("result = ",result);
    </script>

</body>
</html>

十一、promise

优化异步回调地狱问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <script>
        //1、查出当前用户信息
        //2、按照当前用户的id查出他的课程
        //3、按照当前课程id查出分数
        // $.ajax({
        //     url: "mock/user.json",
        //     success(data) {
        //         console.log("查询用户：", data);
        //         $.ajax({
        //             url: `mock/user_corse_${data.id}.json`,
        //             success(data) {
        //                 console.log("查询到课程：", data);
        //                 $.ajax({
        //                     url: `mock/corse_score_${data.id}.json`,
        //                     success(data) {
        //                         console.log("查询到分数：", data);
        //                     },
        //                     error(error) {
        //                         console.log("出现异常了：" + error);
        //                     }
        //                 });
        //             },
        //             error(error) {
        //                 console.log("出现异常了：" + error);
        //             }
        //         });
        //     },
        //     error(error) {
        //         console.log("出现异常了：" + error);
        //     }
        // });


        //1、Promise可以封装异步操作
        // let p = new Promise((resolve, reject) => { //传入成功解析，失败拒绝
        //     //1、异步操作
        //     $.ajax({
        //         url: "mock/user.json",
        //         success: function (data) {
        //             console.log("查询用户成功:", data)
        //             resolve(data);
        //         },
        //         error: function (err) {
        //             reject(err);
        //         }
        //     });
        // });

        // p.then((obj) => { //成功以后做什么
        //     return new Promise((resolve, reject) => {
        //         $.ajax({
        //             url: `mock/user_corse_${obj.id}.json`,
        //             success: function (data) {
        //                 console.log("查询用户课程成功:", data)
        //                 resolve(data);
        //             },
        //             error: function (err) {
        //                 reject(err)
        //             }
        //         });
        //     })
        // }).then((data) => { //成功以后干什么
        //     console.log("上一步的结果", data)
        //     $.ajax({
        //         url: `mock/corse_score_${data.id}.json`,
        //         success: function (data) {
        //             console.log("查询课程得分成功:", data)
        //         },
        //         error: function (err) {
        //         }
        //     });
        // })

        function get(url, data) { //自己定义一个方法整合一下
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: url,
                    data: data,
                    success: function (data) {
                        resolve(data);
                    },
                    error: function (err) {
                        reject(err)
                    }
                })
            });
        }

        get("mock/user.json")
            .then((data) => {
                console.log("用户查询成功~~~:", data)
                return get(`mock/user_corse_${data.id}.json`);
            })
            .then((data) => {
                console.log("课程查询成功~~~:", data)
                return get(`mock/corse_score_${data.id}.json`);
            })
            .then((data)=>{
                console.log("课程成绩查询成功~~~:", data)
            })
            .catch((err)=>{ //失败的话catch
                console.log("出现异常",err)
            });

    </script>
</body>

</html>

如果觉得文章对你有用，请随意赞赏

JavaScript

ES6新特性

https://qiandao.space/archives/es6新特性

作者

千帆暮雨

发布于

2022-08-24

更新于

2022-08-24

许可协议

CC BY 4.0

一、let和const的定义

二、let-const-var的区别

三、模版字符串

四、函数默认参数

五、箭头函数

六、对象简写

七、对象解构

八、对象传播操作符

九、数组map

十、数组reduce

十一、promise

作者

发布于

更新于

许可协议

评论