ES6语法

★ES6

1.let和const命令

•  let：定义变量
• const：定义常量

2.let、const、var的区别

　　let和const解决 

　　1）var 的变量穿透的问题

　　2）常量修改的问题（用var定义常量是可以修改的，用const定义常量是不可以修改的）

 总体 let和const 要比var语法更严格。

 建议：

•  在实际开发和生产中，如果是小程序、uniapp或者一些脚手架中，可以大胆使用let和const。
• 但是如果是web开发，建议大家还是使用var，因为在一些低版本的浏览器还是不支持let和const

3.模板字符串

利用 反引号（飘键）

！+Tab键 快速建立html模板

动态拼接字符串时候使用。

//传统的方式
var person={
   name:"创客未来", 
   address:"haerbin",
   link:"http://hrbckfuture.com"
};
let  address="我是"+person.name+"地址"+person.address+"网址"+person.link;


//es6的语法模板字符串语法
let address2=`我是${person.name}地址${person.address}网址${person.link}`;

4.默认参数

方法中参数的默认缺省值

 <script>
        //参数具有默认值，调用方法时候少传参数值也不会报错
        function sum(a=100,b=100){
            return a+b;
        }

        var result=sum(100);

    </script>

5.箭头函

  <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就可以直接省去{}和return。但是如果有其他方法体则不能省去{}和return。
       //4.如果参数只有一个，可以把括号也省去，如果有多个参数则不能省去。
　　　　var sum1=function(a){
　　　　　　return a*2;
　　　　};
       //改进
       var sum1=a=>a*2
    </script>

6.对象初始化简写

 <script>
      //原来创建对象
      var info={
        title:"创客未来",
        link:"http://hrbckfuture.com",
        go:function(){
            console.log("来了老弟");
        }
      };

      //es6简写
      //因为对象是key：value存在
      //1.如果key和变量的名字一至，可以只定义一次即可
      //2.如果value是一个函数，可以把`:function`全部去掉，只剩下()即可。
      var title="创客未来";
      var link="http://hrbckfuture.com";
      let info2={
        title,
        link,
        go(){
            console.log("来了老弟");
        }
      };

    </script>

7.对象解构

对象结构：es6提供一些快捷获取对象属性和行为方式

对象是key：value存在，获取对象属性和方法的方式有两种

1.通过"."

2.通过"[]"

<script>
      var title="创客未来";
      var link="http://hrbckfuture.com";
      let info2={
        title,
        link,
        go(){
            console.log("来了老弟");
        }
      };

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

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

      //es6对象解构，其实就快速获取属性和方法的方式一种形式
      var {title,link}=info2;
      //还原代码
      var title=info2.title;
      var link=info2.link;
      //方法解构
      var {go}=info2;
      go();

    </script>

8.对象传播操作符  ...

把一个对象的属性传播到另外和一个对象中

  <script>

      var name="创客未来";
      var address="哈尔滨";
      var link="http://hrbckfuture.com";

      let info2={
        name,
        address,
        link,
        go(){
            console.log("来了老弟");
        }
      };

      //结构
      var {name,address,...person2}=person;

      //person2 只有 link和go，因为name和address已经解构出来了
      //...传播操作符把没有解够的属性和方法传播给另一个对象
    </script>

9.数组Map

    <script>       //定义一个数组
        let arr=[1,2,3,4,5,6,7];
        //原来的方式，将数组中的数据乘以2
        let newarr=[];
        for(let i;i<arr.length;i++){
            newarr.push(arr[i]*2);
        }

        //es6 map方式,map自带循环，并把处理的值回填到对应的位置
        var newarr2=arr.map(function(ele){
            return ele*2;
        });
        //再次改进
        var newarr3=arr.map(ele=>ele*2);

        //map处理对象的数据
        var users=[{age:10,name:"小创"},{age:10,name:"小客"},{age:10,name:"小未"}];
        var newusers=users.map(ele=>{
            ele.age=ele.age+1;
            return ele;
        });

    </script>

利用map可以随时向数组中添加属性

  //map处理对象的数据
        var users=[{age:10,name:"小创"},{age:10,name:"小客"},{age:10,name:"小未"}];
        var newusers=users.map(ele=>{
            ele.age=ele.age+1;
            ele.check=true;
            return ele;
        });

11.数组Reduce

数组中两个数组相加

    <script>
    
        //定义一个数组
        let arr=[1,2,3,4,5,6,7];
        var result=arr.reduce((a,b)=>a+b);
        //计算原理
        //第一次相加 a=1，b=2 计算结果等于3，数组变成[3,3,4,5,6,7]
        //第二次相加 a=3,b=3 计算结果等于6，数组变成[6,4,5,6,7]
        //....
    </script>