zoukankan      html  css  js  c++  java
  • ES6 箭头函数

    箭头函数

    定义

    我觉得箭头函数就是将es5中的普通函数换一种写法,使代码看起来更加简洁

    基本方法

    1、简单例子

    var f=v=>v;
    console.log(f("箭头函数"));        //箭头函数 
    

    上面的代码等同于

    var function(v){
        return v;
    }
    console.log(f("普通函数"));     //普通函数
    

    2、箭头函数不需要参数或者需要多个参数时,用圆括号代表参数部分

    var f=()=5;
    //等同于
    var f=function(){
        return 5;
    }
    
    var sum=(num1,num2)=>num1+num2;
    //等同于
    var sum=function(num1,num2){
        return num1+num2;
    }
    

    3、箭头函数的代码部分多于一条语句,就要用大括号将其括起来,并使用return语句返回,返回的是对象,就必须在对象外面加上括号

    var sum=(num1,num2)=>{return num1+num2};
    var getId=id=>({id:id,name:"aaaa"})         //返回的是对象
    

    4、简化回调函数

    //例子1
    //普通写法
    [1,2,3].map(function(x){
        return x*x;
    })
    //箭头函数写法
    [1,2,3].map(x=>x*x)
    
    //例子2
    //正常函数写法
    var result=values.sort(function(a,b){
        return a-b;
    })
    
    //箭头函数写法
    var result=values.sort((a,b)=>a-b);
    

    使用注意事项

    1. 函数体内的this对象就是定义时所在的对象,而不是使用时所在的对象
    function Timer(){
        this.second=0;
        setInterval(()=>this.second++,1000);
    }
    var timer=new Timer();
    setTimeout(()=>console.log(timer.second),3100);
    //输出结果为3而不是0,因为箭头函数让this总是指向Timer的实例对象
    
    1. 不可以当作构造函数
    2. 不可以使用arguments对象,该对象在函数体内不存在,可以用rest参数代替
    3. 不可以使用yield命令,因此箭头函数不能用作Generator函数
  • 相关阅读:
    【力扣】767. 重构字符串
    【力扣】976. 三角形的最大周长
    【力扣】164. 最大间距
    【力扣】454. 四数相加 II
    JS中,输出1-10之间的随机整数
    web移动端浮层滚动阻止window窗体滚动JS/CSS处理
    禁止网站F12和查看源码
    苹果浏览器移动端click事件延迟300ms的原因以及解决办法
    jQuery下锚点的平滑跳转
    js实现placehoider效果
  • 原文地址:https://www.cnblogs.com/15fj/p/8371184.html
Copyright © 2011-2022 走看看