美文网首页
箭头函数-ES6初学习

箭头函数-ES6初学习

作者: 程咸菜 | 来源:发表于2017-02-08 13:16 被阅读0次

    箭头函数,就是对函数进行简化操作,基本写法

    =>

    => 就是当你只需要一个只有一个参数的简单函数时,可以使用新标准中的箭头函数,它的语法非常简单:标识符=>表达式。你无需输入function和return,一些小括号、大括号以及分号也可以省略。

    function show(x){           
        console.log(x)          
    };                
    show(4);            
    var fun = y => y;      
    console.log(fun(5));    
    

    () 多参数的处理

    如果要写一个接受多重参数(也可能没有参数,或者是不定参数、默认参数、参数解构)的函数,你需要用小括号包裹参数 list
    一个参数的情况下你可以不用小括号 var fun = y => y; 这样直接写,两个参数或者有更多的参数的时候就必要用小括号把参数包裹进去。

    var fun = (x,y)=> x+y;       
    console.log(fun(7,9));           
    

    {} 函数体多内容的处理

    复杂一些就好比这样

    var fun = (x,y)=>{       
        x=x*y;      
        y=y*x;    
        return x+y;       
    };      
    console.log(fun(7,9));       
    

    这时我们需要把复杂的计算过程写到大括号里,如果不写大括号就意味着直接就是写入 return 了,所以需要写入到大括号里。

    回调写法

    回调函数,匿名函数也是可以用箭头函数来写的。

    setTimeout(()=>{      
        console.log(123);      
    },1000);         
    

    怎么说呢,箭头函数也可以这样理解就是把函数中的 function 给省略了。

    注意点

    箭头函数我们还需要注意一些细节。

    this 指向的问题

    在函数中 this 指向是很容易搞混淆的。我们在做面向对象,事件的时候,会弄混的。这个 this 指向的问题我单独开一个新的文章来写。

    不可以当做构造函数

    这里有这样的一个构造函数

    var  A = function(){          
        this.a=10;          
    };          
    var A1 = new A();          
    console.log(A1.a);     
    

    这是一个简单的构造函数,这时候如果用 => 来代替了 function 以后会出现什么情况
    var  A = () =>{          
        this.a=10;          
    };          
    var A1 = new A();          
    console.log(A1.a);      
    

    可以看出箭头函数是不可以做构造函数的。

    不可以使用 arguments

    形式参数 arguments 是不能在箭头函数中使用的

    var fun = function(){           
        console.log(arguments[4]+arguments[3]);           
    };           
    fun(1,2,3,4,5);           
    

    但是如果用 箭头函数就会报错
    var fun = ()=>{           
        console.log(arguments[4]+arguments[3]);           
    };           
    fun(1,2,3,4,5);    
    

    Uncaught ReferenceError: arguments is not defined 说没有找到,没有定义。

    不可以用在 Generator 函数中。

    Generator 这个函数就是生成器,是为了解决异步操作。这个点也是比较多,我们单独写一个博客。
    以上的四点是需要注意的地方。

    相关文章

      网友评论

          本文标题:箭头函数-ES6初学习

          本文链接:https://www.haomeiwen.com/subject/brbvittx.html