手把手教你寫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);