手把手教你写ES6箭头函数

通常函数的定义方法

var fn = function(...){     ......     }

例如：

var add = function(a,b){     return a+b; }

//或者：

function fn(...){     ...... }

//例如：

function add(a,b){     return a+b; }

简写方法速记

将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体。

function add(a,b){     return a+b; }

简写为：

(a,b)=>{//删掉了function和函数名     return a+b; } var add = function(a,b){     return a+b; }

简写为：

var add = (a,b)=>{ //删掉了function     return a+b; }

附加规则

 

当函数参数只有一个时，括号可以省略；但是没有参数时，括号不可以省略。函数体（中括号）中有且只有一行return语句时，中括号及return 关键字可以省略。

新旧函数定义的对比

无参数函数 let fn = function(){     return 'helloWorld'; }

简写为：

let fn = ()=>{//但是没有参数时，括号不可以省略     return 'helloWorld'; }

根据规则二，简写为：

let fn = ()=>'helloWorld'; 一个参数的函数 let fn = function(a){     return a; }

简写为：

let fn = (a)=>{     return a; }

根据规则一，还可以简写为：

let fn = a=>{     return a; }

根据规则二，还可以简写为：

let fn = a=>a; 多个参数的函数 let fn = function(a,b){     return a+b; }

简写为：

let fn = (a,b)=>{//多于一个参数，圆括号不可省略     return a+b; }

根据规则二，还可以简写为：

let fn = (a,b)=>a+b; 函数体代码多于一行 let fn = function(){     console.log('hello');     console.log('world');     return 'helloWorld'; } //简写为： let fn = ()=>{     console.log('hello');     console.log('world');     return 'helloWorld'; }

函数返回json对象时

let fn = function(){     return {"a":5}; } 简写为： //let fn = ()=>{"a":5};这是错误的 应简写为： let fn = ()=>({"a":5});//注意{}外的圆括号。

实例

//排序方法1 let arr = [3,6,2,1]; let arr2 = arr.sort(function(a,b){     return a-b; }); alert(arr2); //简写 let arr3 = [939,23,0,-1,94]; let arr4 = arr3.sort((a,b)=>a-b); alert(arr4);