箭头函数的写法特点

jiezi

6 年前

用 => 来标识

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

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

对应上面两个

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

附加规则

当函数参数只有一个时，可省略小括号，但没有时，不能省略。

函数体（中括号）中有且只有一行 return 语句时，中括号和 return 关键字可以省略。

函数返回 json 对象，且只有一行 return 语句时，返回的简写要加小括号; 如 let add = a =>({“a”:2})

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

        var add = function(a,b){return a+b;};
        // 即：var add = (a,b)=>{return a+b};
        // 即：var add = (a,b)=>a+b;
        ---------------------------------------------------------------------------------------
        var ret = function(a){return a+1;};
        // 即：var ret = a=>a+1;
        ---------------------------------------------------------------------------------------
        var non = function(){return 2+1;};
        // 即
        var non = ()=>2+1;

        函数体代码多于一行
        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)

箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的 this 是词法作用域，由上下文确定。

箭头函数写代码拥有更加简洁的语法。

不会绑定 this，或者说箭头函数中不会改变 this 本来的绑定。

箭头函数的写法特点

1、箭头函数简介

2、通常函数的定义方法

3、简写写法

4、基础语法

5、总结