深入浅出es6之箭头函数

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)

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

扩展运算的用法:

  1. 合并数组
  2. 与解构赋值结合
  3. 分割字符串

… 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也是不存在的,它们都指向外层函数的这些属性

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值