ES6学习箭头函数

箭头函数作用

1.函数目的指向性可读性更好
2.简化代码
3.提升开发效率 普通函数与箭头函数对比

    function sum (a,b) {
        return a + b
    }
    let sum = (a,b) => a + b
    console.log(sum (10,20))  // 30
复制代码

箭头函数返回值如果不是对象,不需要写{},如果是对象,需要使用()包裹。

    let sum = (a,b) => ({a:a,b:b})
复制代码

es5多重返回不方便

    function sum (x) {
        return function (y) {
            return function (z) {
                return x + y + z
            }
        }
    }
    var sum1 = sum(1)
    var sum2 = sum1(2)
    var sum3 = sum2(3)
    console.log(sum3) //6
复制代码

上面代码换成箭头函数会简化很多

    let sum = x => y => z => x + y + z
    console.log(sum(1)(2)(3)) // 6
复制代码

箭头函数特点

1.不用写function关键字
2.只能用作函数使用不能new,没有原型
3.参数不能重复命名
4.返回值可以不写return,但是有时需要配合{}
5.内部arguments this 由定义时外围最接近一层的非箭头函数的arguments和this决定其值 下面例子看出arguments输出为箭头函数定义时外围函数的arguments

    function outer () {
        let sum = (a,b) => {
        console.log(arguments,a,b) //[5,6,7],3,4
    }
    sum(3,4)
    }
    outer(5,6,7)
复制代码

箭头函数的this除了外界没有定义函数指向window,其他和arguments用法相同

    let sum = () => {
        console.log(this) //window
        console.log(arguments) //报错,arguments没有定义
    }
复制代码

箭头函数配合数组的map,forEach,filter等方法使用会更好。

有错误欢迎指出,谢谢观看。

广告:
作者github:github.com/webxukai
作者gitee:gitee.com/webxukai
作者微信:e790134972
作者QQ:我想你应该知道了!
作者QQ邮箱:同上,呵呵!

ES6其他文章:

ES6学习let&const
juejin.im/post/5c683e…
ES6学习...运算符
juejin.im/post/5c6917…
ES6学习解构赋值 juejin.im/post/5c692b…

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值