Es6详解

Es6详解

一、 概述

1. ECMAScript 是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言，在万维网上应用广泛，往往被称为JavaScript，可以理解为是JavaScript的一个标准。
2. 快速发展：es2.0到es6.0

二、Es6的语法

1. let和const命令

 <script>
        //传统定义变量和常量的方式 统一使用var
        //ES6定义的方式:
        //定义变量
        let name1 = "xqh";
        //定义常量
        const PI2 = Math.PI;

        console.log(name1)
        console.log(PI2);
    </script>

• let/const/var 的区别

1. let 和const解决：
   • var会导致变量穿透的问题
   • var会导致常量修改的问题

 <script>
     for(var i= 0;i<5;i++){
        console.log(i);
     }
     console.log(i);   //结果是遍历出 0 1 2 3  4 5，造成变量穿透 Live reload enabled.
     //改成let，解决变量穿透的问题 0 1 2 3  4

     const PI = Math.PI;
     PI=100;
     console.log(PI); //用var的话会打印出100，违背了常量不可变。改成const，则不可变
     //在实际开发和生产中，如果是小程序，uniapp或者一些脚手架中，可以大胆的去使用let和const
     //但是如果是web开发中，建议大家还是使用var，因为在一些低版本的浏览器还是不支持let和const
    </script>
    

2.模板字符串

 <script>
    //字符串会牵涉到动态部分
    var person={
        name:"xqh",
        address:"jiangxi",
        link:"http://www.baidu.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>

3. 函数默认参数与箭头函数

1. 函数默认参数

<script>
        //函数默认参数
        function sum(a=200,b=100){//默认参数
            return a+b;
        }
        var result = sum(200);//只有一个先传递给a，b有默认参数的话就用默认参数
        console.log(result);//300
  
    </script>

2. 箭头函数

  <script>
        //箭头函数-重点（在未来的项目开发中：比如小程序，uniapp，一些脚手架中大量使用）
        var sum = function(a,b){
            return a+b;
        };
        //改进 去掉function，在括号后面加箭头，如果逻辑代码仅有return可以直接省去,如果只有一个参数则括号也可以省去
        var sum = (a,b)=>a+b;
        var result = sum(2,3);
        console.log(result);

        //例子
        var arr = [1,2,3,4,5,6];
        var newarr = arr.map(function(obj){
            return obj*2;
        });
        console.log(newarr)
        //简化
        var newarr1 = arr.map(obj=> obj*2);
    </script>

4. 对象初始化简写

• 如果一个对象中的key和value的名字一样的情况下可以定义成一个

<script>
       let info={
        title:"江西农业大学",
        link:"www.baidu.com",
        go:function(){
            console.log("我骑着小蓝车去上课");
        }

       };
  
       //es6简写
       //因为对象是key:value存在
       //1：如果key和变量的名字一致，可以只定义一次即可
       //2：如果value是一个函数，可以把`:function`去掉，只剩下（）即可
       var title="江西农业大学";
       var link = "www.baidu.com";
       let info2 = {
        title,
        link,
        go(){
            console.log("我骑着小蓝车上课");
        }
       };
       console.log(info2);
       console.log(info2.link);
       console.log(info2.title);
       console.log(info2.go);

    </script>
    

5.对象解构

1. 对象解构—es6提供一些快捷获取对象属性和行为方式

  <script>
        //对象是以key:value存在，获取对象属性和方法的方式有两种
        //1.通过.   2通过[]
        var title="江西农业大学";
       var link = "www.baidu.com";
       let info2 = {
        title,
        link,
        go(){
            console.log("我骑着小蓝车上课");
        }
       };
       //通过.的方式
       console.log(info2);
       console.log(info2.link);
       console.log(info2.title);
       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

    </script>

6.对象传播操作符

1. 对象传播操作符

 <script>
      //对象传播操作符
      var person={
        name:"学相伴",
        address:"广东",
        link:"www.kuangshen.com",
        phone:123456,
        go(){
            console.log("开始上班了");
        }
      };
      //解构出来
      var {name,address,...person2}=person;//name/address被解构了。剩下的都会在person2中，这就是传播操作符
      console.log(person2);//打印出来person2对象中只有link、phone、go（），因为name、address已经被解构出来了
      console.log(name);
      console.log(address);
      
  
    </script>

2. 简单应用案例

  <script>
       //java---后台
       //数据格式  ：var userPage={pages:10,users:[{},{}],pageNo:1,pageSize:100,totle:100};
       //异步请求 $.post("/user/search",function(res){
       //res={pages:10,users:[{},{}],pageNo:1,pageSize:100,totle:100};
       var userPage = {pages:10,users:[{},{}],pageNo:1,pageSize:100,totle:100};
       var {users,...userPage2}=userPage;//这样就可以把pages,pageNo,pageSize,totle全部取出来，而users单独取出来
       

  
    </script>
    

7.数组map和reduce方法使用

1. 数组map

 <script>
      //要对arr数组每个元素*2
      var 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可以很方便实现.map:自带的循环，并且会把处理的值回填对应的位置
      var newarr2 = arr.map(function(ele){
        return ele*2 
      })

      //简化：var newarr2 = arr.map(ele=>ele*2);
      console.log(newarr2);

      //map处理对象的数据
      var users=[{age:10,name:"小学"},{age:12,name:"小胡"},{age:15,name:"小胖"}];
      //现在要进行每个人的年龄递增
      var newusers=users.map(ele=>{
        ele.age = ele.age+1;
        return ele;
      });
      console.log(newusers);
    </script>

2. reduce()使用

  <script>
        //reduce快速将数组中元素求和
        var arr=[1,2,3,4,5,6,7,8,9,10];
        var result=arr.reduce(function(a,b){
            return a+b;
        });
        //简化 var resule=arr.reduce((a,b)=>a+b);
        console.log(result);
    </script>

三、小结

1. es6语法可以适用于nodejs中，不会报错
2. 用终端输出