箭头函数的写法特点

喜欢ヅ旅行 2021-07-26 20:28 338阅读 0赞

## 1、箭头函数简介 ##

>  *  用 => 来标识
>  *  箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数。

## 2、通常函数的定义方法 ##

var fn1 = function(a, b){
      console.log(a + b);
    };
    fn1(1, 2); // 3
    
    function fn2(a, b){
      console.log(a - b);
    }
    fn2(2, 1);//1

## 3、简写写法 ##

> 对应上面两个

//删掉了function
    var fn11 = (a, b)=>{   
      console.log(a+b);
    };
    fn11(1, 2); // 3
    //删掉了function和函数名,无意义
    (a,b)=>{  
      console.log(a-b)
    }

## 4、基础语法 ##

> 附加规则
> 
>  *  当函数参数只有一个时，可省略小括号，但没有时，不能省略。
>  *  函数体（中括号）中有且只有一行return语句时，中括号和return关键字可以省略。
>  *  函数返回json对象，且只有一行return语句时，返回的简写要加小括号;如let add = a =>(\{"a":2\})

(参数1, 参数2, …, 参数N) => { 函数声明 }
        
        //相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
        (参数1, 参数2, …, 参数N) => 表达式（单一）
        
        // 当只有一个参数时，圆括号是可选的：
        (单一参数) => {函数声明}
        单一参数 => {函数声明}
        
        // 没有参数的函数应该写成一对圆括号。
        () => {函数声明}

--------------------

--------------------

函数体代码多于一行
            let fun1 = function(){
              console.log('1');
              console.log('2');
              return 1+2;
            }
            fun1();
            // 简写为
            let fun2 = ()=>{
              console.log('1');
              console.log('2');
              return 1+2
            }
            fun2();

--------------------

函数返回json对象时
            let f1 = function(){
              return {"a":2};
            }
            let f2 = ()=>{"a":2} // 错误
            let f2 = ()=>({"a":2})
            如果要返回一个对象，就要注意，如果是单表达式，这么写的话会报错：
            x => { foo: x }
            因为和函数体的{ ... }有语法冲突，所以要改为：
            // ok:
            x => ({ foo: x })

--------------------

实例
            let arr1 = [9,6,1,7];
            let arr11 = arr1.sort(
              function(a,b){
                return a-b;
              }  
            )
            console.log(arr11);
            let arr3= [2,3,9,5];
            let arr33 = arr3.sort((a,b)=>a-b)
            console.log(arr33)

## 5、总结 ##

>  *  箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。
>  *  箭头函数写代码拥有更加简洁的语法。
>  *  不会绑定this，或者说箭头函数中 不会改变this本来的绑定。