您现在的位置:首页 >> 前端 >> 内容

深入浅出es6之箭头函数

时间:2017/8/15 8:54:00 点击:

  核心提示:es6的函数es6函数的几个新特性:可以设置参数默认值 可以结合解构赋值默认值使用 利用rest(变量名)传入任意参数 rest和扩展运算符rest参数(变量名),用于获取函数的多余参数,rest参数...

es6的函数

es6函数的几个新特性:

可以设置参数默认值 可以结合解构赋值默认值使用 利用rest(…变量名)传入任意参数

… rest和扩展运算符

rest参数(…变量名),用于获取函数的多余参数,rest参数搭配的变量是一个数组,该变量将多余的参数放入其中。

1. 利用rest(…变量名)传入任意参数

    var x = 1;

    function foo(...y) {
        console.log(y)  //[1,2,3,4]
        console.log(arguments) //{ '0': 1, '1': 2, '2': 3, '3': 4 }
        var x = 2;
        setTimeout(function() {
            console.log(x)
        }, 1000)
    }
    foo(1, 2, 3, 4)

rest和arguments有点相似,区别在于:
1、箭头函数不能使用arguments
2、rest返回的数组,arguments是类数组
3、rest参数后不能有其他的参数

2. 利用扩展运算符(…数组)替代数组的apply方法

在es5中,需要用apply将数组转化为函数参数,如下

     function f(x, y, z) {
        console.log(x + ' ' + y + ' ' + z);
    }
    var args = [1, 2, 3];
    f.apply(null, args)

在es6中就不需要这种方式了,可以使用…来代替

    function f(x, y, z) {
        console.log(x + ' ' + y + ' ' + z);
    }
    var args = [1, 2, 3];
    // f.apply(null, args)
    f(...args)

另一个例子

    var arr1 = [0, 1, 2]
    var arr2 = [3, 4, 5]
    var arr3 = arr1.concat(arr2)
    console.log(arr3) //[ 0, 1, 2, 3, 4, 5 ]

    var arr4 = arr1.push(arr2)
    console.log(arr1) //[ 0, 1, 2, [ 3, 4, 5 ] ]

这里我们想通过arr1.push(arr2),发现失败了,最后仅仅是最后一个元素变成了数组。

如果想使用arr1.push方法的话,就需要用apply传arr2了

    var arr4 = Array.prototype.push.apply(arr1, arr2) //[ 0, 1, 2, 3, 4, 5 ]

但是如果使用扩展运算符的话,就简单一些了

  var arr4 = arr1.push(...arr2)

原理很简单,因为扩展运算符可以把数组转化为逗号分割的参数。

扩展运算的用法:

合并数组 与解构赋值结合 分割字符串

… name属性

函数的name属性可以返回函数名

箭头函数

特性1:this总是指向函数所在的对象

function foo() {
    setTimeout(() => {
        console.log("id", this.id) //id 42
    }, 100)
}

function foo2() {
    setTimeout(function() {
        console.log("id:", this.id) //id: undefined
    }, 100)
}

foo2是普通函数,setTimeout里面的普通函数this指向全局对象;
foo1是箭头函数,setTimeout里的箭头函数的this指向当前对象;

说明:箭头函数this的固定化并不是因为剪头函数内部有this指针,而正是因为它没有this指针,所以,内部的this就指向外层代码块的this。
所以,箭头函数不能用作构造函数
除了this,arguments、super和new.target也是不存在的,它们都指向外层函数的这些属性

作者:网络 来源:Daisy花园