关于对es6的学习，总结和理解

es6的全名是ECMAscript 2015

一、var、const、let变量类型的说明

    var如果有重复声明的变量名称将会覆盖之前声明的变量值

       如：var a=1;

            function fun(){

                var a=2;

                    console.log(a); //2

            }

            console.log(a);  //2

    const一般声明不会随便被改变的变量，如果试图改变const声明的变量会报错！也可以称之为常量，

            如：函数声明等不会常被修改的变量。

    let块级作用域，重复声明不会应该之前声明的变量的值。

        如：let a=1;

              function fun(){

                let a=2;

                console.log(a);//2

            }

            console.log(a); //1

二、箭头函数

    es5

        var fun=function(a,b){

            return a+b;         

      }

        或

        var fun1=fun(){

            console.log("haha"); //haha

        }

    es6

        const fun=(a,b)=>{

            return a+b;

        }

        或

        const fun1=()=> console.log("哈哈") ;//haha

备注：重要的一点是箭头函数没有this，如果在箭头函数中使用了this，那么该this一点是指向外层的this。

         也正是因为箭头函数没有this，那么也就无从谈起在es6中call/apply/bind来改变this的属性

        如：es5

           var fun={

                id:"1",

                getid:function(){

                   return console.log(this.id); //1

                }

            } 

            es6

                const fun={

                    id:"1",

                    getid:()=>{

                        return console.log(this.id)//undefined.id

                    }

                }

        在es6会默认采用严格模式，所以this也不会自动指向window对象，且箭头函数本身没有this，所以输出的this是undefined

        在es6中换种写法，可以这样写：

        const fun={

            id:"1",

            getid:function(){

                return setTimeout(()=>{console.log(this.id,'-------')},50); 

                    /*打印出来的是1，因为该箭头函数中的this指向的是getid中的function，如果用const多次声明同一个变量的话会出现该错误。如下：VM93:1 Uncaught SyntaxError: Identifier 'person1' has already been declared
    at <anonymous>:1:1*/

            }

        }

三、模版字符串

        let a=1;

        let b=2;

        let c=`${a}+${b}=${a+b}`;//console.log(c);a+b=3;//模版字符串还支持换行等

四、结构解析

    let animal={

        type:"bird",

        name:"haha"

    }

   let{type,name}=animal;

   console.log(type,name,'------')//“bird”,"haha"

数组也可以类似的解析：

    如：    let arr=[1,2,3];

        let[a,b,c]=arr;

        console.log(a,b,c,'-----');

数组通过结构解析是通过序号来一一对应进行解析显示。有序关系

 对象是通过对象名来解析，无序的关系。

四、es6中的默认值用法

    如：es6:

    const fun=(a=0)=>{

        console.log(a);//0

    }

    es5:

    function fun(a){

        console.log(a || 0);//0

    }

五、数组和对象合并。Rest 操作符(...+name)

    数组如下：

    let a=[1,2,3];

    let b=[...a,4,5,6];

    console.log(b);//[1,2,3,4,5,6];

    对象如下：

    let a={

        b:1,

        c:2

    }

    let aa={

        ...a,

        d:3,

        e:4

    }

    console.log(aa),{b:1,c:2,d:3,e:4};

    类似于es6中object.assign({},a,aa);

    类似于es5中的$.extend({},a,aa);

六、es6处理对象数据和函数运算,Rest 操作符(...+name)

    函数对象处理：

        let preson={

            name:"lucy",

            sex:"girl",

            age:"18"

        }

        let {name,...oth}=preson;

    console.log(oth,'-----');//{sex:"girl,age:"18"}

    使用方式：<div {...oth}>{name}</div>

    函数运算：

        let addnum=(a,b,...num)=>{

            return console.log(num.reduce((c,d)=>{c+d})+a+b);//10

        }

        addnum(1,2,3,4);

        es6的运算和对象的处理相对于es5来说比较灵活，多熟悉熟悉 用用就好。

七、对象字面量与类(class)

    1、对象字面量

        es6  如：

            let a=1,b=2;

            let ab={

                a,

                b

            }

        console.log(ab);//{a:1,b:2}

        es5  如：

        var ab={

            a:1,

            b:2

        }

       console.log(ab);//{a:1,b:2};

   在字面量中也可以使用中括号属性。如下：

        es6中，中括号作为字面量：

           let ab={

                ['na'+'me']:"haha",

                ['age']:"18"

            }

            console.log(ab,'-----');//{name:"haha",age:"18"}

    2、类（class）

        es6 如：

            class component{

                constructor(name.sex){  //es6中的构造函数

                    this.name=name;

                    this.sex=sex;

                    static age=20; //等同于component.age=20;

                    height:180; //等同于在构造函数中添加的属性，相当于this.height=180

                }  

                getname(){

                    return console.log(this.name);

                }

                getheight=()=>{

                    return console.log(this.height);//180

                }

            }

        es5 如；

            function person(name,sex){ //es5中的构造函数

                this.name=name;

                this.sex=name;

            }

           person.prototype.getname=function(){  //实现person的原型函数

                return console.log(this.name);

            }

八、继承 extends

    es6 如：

       class bird extends animal(){

            constructor(name,type){

                super(type); //这是表示子类继承父类需要在构造函数中加入super，相当与在es5中用call或者是apply

                this.name=name;

            }

        }

    es5 继承的call 、apply  如：

        function animal(name type){ //父类

            this.name=name;

            this.type=type;

            this.say=function(){

                return console.log("hello,i am "+name +"i am" +type,"nice to meet you!");

            }

        }

       function dog(name,type){ //子类 call方式

               animal.call(dog,name,type);

       }

       function cat(name,type){ //子类 apply方式

           animal.apply(cat,[name,type]);

        }

        var dog1=new dog("haha","dog");

        dog1.say();//hello,i am haha i am dog,nice to meet you!

        var cat1=new cat("hehe","cat");

        cat1.say();//hello,i am hehe i am cat,nice to meet you!

        

关于checkbox选中当前复选框的返回值的写法，方法如下：

    function iteratorFactory(i){

        var onclick = function(e){

             console.log(i)

         }

            return onclick;

        }

        var clickBoxs = document.querySelectorAll('.clickBox')；

        for (var i = 0; i < clickBoxs.length; i++){

            clickBoxs[i].onclick = iteratorFactory(i)

        }

    该方法的博客出自如下，里面还有一下关于es6的总结，大家也可以看看：

    地址：https://blog.csdn.net/qq_24189933/article/details/78655254

以上是总结的几点关于es5 和 es6的基础的知识，希望能对大家有帮助，如有写的有问题的地方也希望大家能够提出来，相互学习，如es5的基础比较扎实的话，es6学起来也是很容易的。