es6 箭头函数

一、在es6中函数的定义和es5之间有明显区别。不需要关键字function 来进行定义，使用=>来指向函数。

不可以new也就是做构造函数以及没有arguments参数。箭头函数的this是在定义的时候确定指向 这和es5不一样，es5是 谁调用他，他就指向谁。

 

        document.addEventListener('click',ev=>{
            setTimeout(()=>{
                console.log(this)
            },1000)
        })

输出：window。

箭头函数this的指向是当时定义的父级作用域确定，计时器父级作用域而事件函数是箭头函数，他的this指向是由父级作用域，而他父级是document 它的作用域是window。所以输出window。这地有点绕。

如果将事件函数改为普通匿名函数 就会指向document。

        document.addEventListener('click',function(){
            setTimeout(()=>{
                console.log(this)
            },1000)
        })

 

输出：document。

因为普通匿名函数的指向是在被调用的时候确定的，而调用的时候是由document所以，他的指向是document，而箭头函数指向是由定义父级作用域，而父级是作用域是document所以执行document。

好处：这样我们不必定义额外的变量去获取这个值，而是直接指向我们需要的对象。

如果我们使用普通匿名函数的时候，this的输出是window 如果想获取document需要定义变量获取。

     document.onclick=function(){
            var  that=this;
            var setId=setTimeout(function(){
                    console.log(this);
                    console.log(that)
            },1000)
        }

 

输出：this   window

           that  document

语法：()=>{}

1）、没参数情况：

        var  a=()=>2;
        console.log(a());

注意：没有参数的时候，其中()不可以省略。 如果不写{}的时候，=>后面跟的是表达式即返回一个明确值，表示表达式为函数的返回值。

2）、单个参数的情况：

        var sing=a=>2*a;
        console.log(sing(2));

 

注意：单个参数的时候()小括号可以省略。

3）返回值为一个对象，需要在返回值的加上小括号，因为{}在箭头函数认为是代码块即执行的函数体。需要用小括号()来让js解析成表达式。

        var obj=()=>({'a':2});
        console.log(obj());

 4）当有多条执行语句的时候，需要使用{}来表示。自定义返回值。

     var myfunc=(a)=>{
            a>100?a=200:a=10;
            return a;
        }
        console.log(myfunc(121))

 

5）做为事件的handle

        document.addEventListener('click',ev=>{
            console.log(ev);
        })

6）其他js函数中的参数为匿名函数。比如数组排序回调。

        var arr=[3,21,2,4,1].sort((a,b)=>{
            if(a>b){
                return -1;
            }else{
                return 1;
            }
        })
        console.log(arr);

7)使用箭头函数，this被固定 他的指向就是他父级作用域，而普通匿名函数的，this的指向就是谁调用他就指向谁。

//箭头函数
        var  obj={

            data:[1,2,3,4],
            check:()=>{
                console.log(this);
                return this.data;
            }
        }
        console.log('arrow'+obj.check())

//普通箭头函数
        var  objNoArr={
            daxxta:[2,3,4],
            check:function(){
                console.log(this);
                return this.daxxta;
            }
        }
        console.log('noarrow'+objNoArr.check())

注意：在箭头函数中，他的父级是obj  作用域是当前window。所以this指向就是当前window。

而普通匿名函数，this指向为被调用对象，而objNoArr调用check函数所有this指向为objNoArr对象。

所以我们在使用时候，一般箭头函数和普通匿名函数结合在一起使用，以便来获取当前操作对象。

var  obj={
    name:'ok',
    init:function(){
        document.addEventListener('click',ev=>console.log(this.name))
    }
}
obj.init()

 二、es6 函数扩展：

1、形参赋予默认值，在函数体里不能用let、const 再次赋值，会报错。

var  testFunc=(a=2)=>{
    console.log(a)
}
testFunc();

2、参数列表 rest  在箭头函数中没有arguments这个类数组接收形参。er是通过 ...argsname 来进行接收 类似于java 接收不固定参数一样，如果确定参数也可以这样写 a,....arrs  形参a接收第一个参数，而后面的arrs接收其他参数，arrs是数组而不是类数组，具备数组所有方法。

let   testFuc=(...arrs)=>{
    console.log(arrs);
    console.log(  arrs instanceof Array)
}
testFuc(1,2,3,4)

let   testFuc=(a,...arrs)=>{
    console.log(a,arrs);
    console.log(  arrs instanceof Array)
}
testFuc(1,2,3,4)

 而es5的匿名函数的是通过arguments来接收，arguments  是类非数组。

var  testMyFunc=function(a,b,c){
     console.log(arguments);
     console.log( arguments instanceof Array)
 }
 testMyFunc(1,2,3)

 三、es6 函数扩展：

1）函数默认值。在es6中可以定义默认值，以前我们在处理函数默认值的时候是用a||2 在a为0或者空字符串的时候 也被处理成默认值，es6可以直接使用function(a=2){}和python java处理的默认值类似。

        var  a=function(a=2){
            console.log(2)
        }
        a();

2）我们定义对象的时候，有时候定义函数的时候，fn:function(){} 这种形式，可以直接写成 fn(){}  定义其他的属性的也可以直接简写。

        var c=11;
        var obj={
            c,
            a(){
            console.log(c)
        }
        }
        obj.a();
        console.log(obj.c);

 

默认省略key值 c  其实是：c:c  a:function(){console.log(c)}

注意的是：这是在对象属性中的定义！！！

 四、扩展运算符：

使用三点：...来合并数组和对象。

    <script>
        let  arr1=[1,2,3,4];
        let arr2=[3,4,56];
        let arr3=[...arr1,...arr2];
        console.log(arr3);
        let obj1={a:2,b:3};
        let obj2={c:45,a:3};
        console.log({...obj1,...obj2});
    </script>

主要在合并对象的时候，出现相同的key的时候，谁在后面 ，谁覆盖前面相同的key对应的值。