初学ES6

01-let和const的定义

    <script>
        // 传统定义变量和常量的方式 统一使用var
        var name = "广东学相伴";
        var link = "https://www.kuangstudy.com";
        var PI = Math.PI;
        console.log(name);
        console.log(link);
        console.log(PI);
 
        //ES6定义的方式
        let name2 = "广东学相伴";
        let link2 = "https://www.kuangstudy.com";
 
        //定义常量
        const PI2 = Math.PI;
 
        console.log(name2);
        console.log(link2);
        console.log(PI2);
    </script>

02-let,const,var的区别

    <script>
        //let 和 const解决
        //1:var的变量穿透的问题
        //2:常量修改的问题 
        for(var i = 0;i<5;i++){
            console.log(i);
        }
        //这里就造成了变量穿透,修改为let解决
        console.log(i);
 
        var PI = Math.PI;
        PI = 100;//对常量进行了修改,改为const解决
        console.log(PI);
 
        //在实际开发中,如果是小程序,uniapp或者一些脚手架中的,可以大胆的去使用let和const
        //但是如果是web开发,建议使用var,因为在一些低版本浏览器中还是不支持let和const的
    </script>

03-模板字符串

    <script>
        //字符串会牵扯到动态部分
        var person = {
            name : "飞哥",
            address : "广东学相伴",
            link : "https://www.kuangstudy.com"
        }
        let address = "我是"+person.name+",正在"+person.address+"讲课,讲课的内容会上传到官网:"+person.link+"上";
        console.log(address);
 
        //ES6的语法模板字符串语法
        let address1 = `我是${person.name},正在${person.address}讲课,讲课的内容会上传到官网:${person.link}上`;
        console.log(address1);
    </script>

04-函数默认参数

    <script>
        //函数默认参数
        function sum(a=50,b=50){
            return a+b;
        }
        //不传参数,使用参数的默认值,不设置默认值,默认值就是undefined
        var result = sum(100);
        console.log("result="+result);
    </script>

05-箭头函数

    <script>
        //箭头函数 - 重点(在未来的项目开发中:比如小程序,unipp,一些常见的脚手架大量使用)
        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,可以只保留return后的内容,其它全部省去
        //4:只用一个参数括号可以省略
        //var sum = (a,b)=>a+b;
    
        var arr = [1,2,3,4,5,6];
        var newArr = arr.map(function(obj){
            return obj * 2;
        });
        //改变
        var newArr2 = arr.map(obj => obj * 2);
        console.log(newArr);
        console.log(newArr2);
    </script>

06-对象简写

    <script>
        let info = {
            title:"广东学相伴",
            link:"https://www.kuangstudy.com",
            go:function(){
                console.log("我骑着小蓝车来公司上班");
            }
        };
 
        //ES6简写
        //因为对象是key:value存在
        //1:如果key和变量的名字一致,可以定义一次即可
        //2:如果value是一个函数,可以把`:function`去掉,只剩下()即可
        var title = "广东学相伴";
        var link = "https://www.kuangstudy.com";
        let info2 = {
            title,
            link,
            go(){
                console.log("我骑着小蓝车来公司上班");
            }
        };
        console.log(info);
        console.log(info2);
    </script>
 
    <!-- 对象简写的案例 -->
    <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",function(){
            var account = $("#account").val();
            var password = $("#password").val();
            //这里采用了对象简写
            var params = {account,password};
            //执行异步请求
            $.ajax({
                type:"post",
                url:"xxx",
                data:params,
                success(){
 
                }
            });
        });
    </script>

07-对象解构

    <script>
        //对象是key:value存在,获取对象属性和方法的方式有两种
        //1:通过 .
        //2:通过 []
        var title = "广东学相伴";
        var link = "https://www.kuangstudy.com";
        let info = {
            title,
            link,
            go(){
                console.log("我骑着小蓝车来公司上班");
            }
        };
        //通过.的方式
        console.log(info.title);
        console.log(info.link);
        info.go();
        //通过[]的方式
        console.log(info["title"]);
        console.log(info["link"]);
        info["go"]();
        //ES6对象结构 - 其实就是快速获取属性和方法的一种形式
        var {title,link} = info;
        //上面的一行代码相当于下面这两行代码
        //var title = info.title;
        //var link = info.link;
        console.log(title,link);
 
        //为什么对象的取值要提供两种方式?
    </script>

08-对象传播操作符

    <script>
        //对象传播操作符 ...
        var person = {
            name : "学相伴",
            address : "广东",
            link : "https://www.kuangstudy.com",
            phone:123456,
            go(){
                console.log("开始上班了");
            }
        };
        //解构出来
        var {name,address,...person2} = person;
        console.log(name);
        console.log(address);
        console.log(person2);
    </script>
 
    <!-- 案例 -->
    <script>
        //java ---后台
        //数据格式:var userPage = {pages:10,users:[{},{}],pageNo:1,pageSize:100,total:100};
        //异步请求
        $.post("/user/search",function(res){
            res = {pages:10,users:[{},{}],pageNo:1,pageSize:100,total:100};
            var {user,...person3} = res;
        });
        //以上操作是将对象中的一个属性赋值出去,把对象中剩余的内容赋值给另一个对象
    </script>

09-数组map

    <script>
        //要对arr数组每个元素*2
        let arr = [1,2,3,4,5,6,7];
        //传统的方式
        let newarr = [];
        for(let i=0;i<arr.length;i++){
            newarr.push(arr[i]*2);
        }
        console.log(newarr);
 
        //map -- 自带的循环,并且会把处理的值回填到对应的位置
        let newarr2 = arr.map(ele => ele * 2);
        console.log(newarr2);
 
        //map处理对象的数据
        let users = [{age:10,name:"小学"},{age:12,name:"小相"},{age:15,name:"小伴"}];
        let newusers = users.map(ele => {
            ele.age = ele.age + 1;
            ele.check = true;
            return ele;
        });
        console.log(newusers);
    </script>

10-数组reduce

    <script>
        var arr = [1,2,3,4,5,6,7,8,9,10];
        //a=1,b=2 a+b=3
        //a=3,b=3 a+b=6
        //a=6,b=4 a+b=10
        //a=10,b=5 a+b=15
        //a=15,b=6 a=b=21
        //......
        var result = arr.reduce((a,b) => a + b);
        console.log("result =",result);
    </script>

注:ES6 可以在node.js,uniapp,微信小程序等得到广泛支持