如何在JAVASCRIPT中使用ES6箭頭函數

箭頭函數是用JavaScript編寫函數表達式的一種相對較新的方法。它們由

ECMAScript 6規範

引入，從那時起成爲最受歡迎的ES6功能。箭頭函數容許您使用粗箭頭語法快速定義帶或不帶參數的JavaScript函數。它的最大優勢是，在建立新的JavaScript函數時，您能夠省略大括號和該函數，並返回關鍵字。

語法一開始可能看起來很奇怪，可是值得熟悉。箭頭功能不只能夠節省時間，並且還能夠產生更具可讀性的代碼。許多JavaScript開發人員已經天天都在使用它們。

Mozilla開發人員網絡就是這樣定義

基本語法的

：

（param1，param2，...，paramN）=> {語句}
複製代碼

在本教程中，咱們將研究一些實例，以瞭解如何在不一樣的場景中建立箭頭函數。

咱們還將使用較早的ECMAScript 5標記向您顯示相同的代碼，以便您能夠看到兩種語法之間的比較。

沒有參數

最簡單的箭頭函數語法是該函數沒有任何參數時。在下面的示例中，ECMAScript 5語法聲明瞭一個函數表達式並將其分配給Birthday變量。它向控制檯輸出一個簡單的文本字符串，說「生日快樂！」。

//沒有參數的ES5語法
var Birthday = function（） {
    return 「生日快樂！」 ;
}

控制檯 .log（Birthday（））;
// 生日快樂！複製代碼

在箭頭函數語法中，大括號以及function和return關鍵字消失。如今，整個功能僅需一行。空括號表示函數沒有任何參數，而且粗箭頭將函數主體綁定到（當前不存在的）參數。

//沒有參數的ES6語法
var Birthday = （） =>  「生日快樂！」 ;

console.log（Birthday（））;
// 生日快樂！複製代碼

一個參數

讓咱們用一個參數（特別是name）擴展前面的示例。舊的ES5語法採用一個參數，並將其值附加到要返回的字符串中：

//具備一個參數的ES5語法
var Birthday = function（name） {
    return 「生日快樂，「 + name + 「！」 ;
}

console.log（Birthday（「約翰」））;//生日快樂，約翰！
複製代碼

箭頭函數的語法本質上是相同的。您須要將參數名稱放在粗箭頭以前的括號內，並在功能塊中省略return關鍵字：

//具備一個參數的ES6語法
var Birthday = （name）=>  「生日快樂，」 + name + 「！」 ;

console.log（Birthday（「簡」））;//生日快樂，簡！
複製代碼

兩個參數

您能夠根據須要使用帶有多個參數的箭頭功能。例如，這是具備兩個參數age和name的同一示例。如今，Birthday（）函數須要兩個輸入來返回字符串。

首先，讓咱們使用ECMAScript 5：

//具備兩個參數的ES5語法
var Birthday = function（age，name） {
    return  age + 「歲生日快樂，」 + name + 「！」 ;
}複製代碼

console.log（Birthday（30，「 John」））;
// 30歲生日快樂，約翰！複製代碼

並且，這是帶有新ES6表示法的相同代碼：

//具備兩個參數的ES6語法
var Birthday = （age，name）=>  age + 「歲生日快樂，」 + name + 「！」 ;
console.log（Birthday（32，「簡」））;// 32歲生日快樂，簡！複製代碼

若是函數聲明太長或佔用多行，您也能夠將其括在大括號內，以下所示。可是，這樣作時，也 老是必須將return關鍵字添加到功能塊中。

//封裝在功能塊中的相同ES6功能
var Birthday = （age，name）=> {
    return age + 「歲生日快樂，」 + name + 「！」 ;
};

console.log（Birthday（34，「 James」））;
// 34歲生日快樂，詹姆斯！複製代碼

條件語句

當您要在功能塊中使用條件語句時，箭頭函數也是一個很好的選擇。如下腳本定義了一個簡單的切換器，其中狀態參數指示切換器是打開仍是關閉。

//使用ES5語法的條件語句
var switcher = function（state） {
    if（state == 「 on」）{
       return 「打開！」 ;
   } else  if（state == 「 off」）{
       return 「關閉！」 ;
   } else {
       return 「切換臺不起做用！」 ;
   }
}

console.log（switcher（「 on」））;
// 打開！
複製代碼

因爲if-else塊佔用多行，所以須要在塊的每一個部份內使用return關鍵字。除此以外，您可使用與之前相同的方式編寫箭頭函數：

//使用ES6語法的條件語句
var switcher = （state）=> {
    if（state == 「 on」）{
       return 「打開！」 ;   } else  if（state == 「 off」）{
       return 「關閉！」 ;
   } else {
       return 「切換臺不起做用！」 ;
   }
}

console.log（switcher（「 off」））;
//關閉！
複製代碼

對象文字

您還可使用箭頭函數語法來聲明setter函數，這些函數使用戶能夠設置

對象文字

的值。下面的setBirthday（）函數容許用戶設置有生日的人的姓名和年齡：

//使用ES5語法的對象文字設置器
var setBirthday = function（name，age） {
    return {
       name：name，
       age：age
   }
}

console.log（setBirthday（「約翰」，30））;
//{name：「約翰」，age：30}
複製代碼

經過使用箭頭功能符號，只需一行就能夠定義相同的setter函數：

//使用ES6語法的對象文字設置器
var setBirthday = （name，age）=>（{{ name：name，age：age}）;

console.log（setBirthday（「簡」，32））;
//{name：「簡」，age：32}
複製代碼

陣列操做

您還可使用箭頭函數來操縱JavaScript數組。例如，讓咱們看一下包含三個對象的persons數組，每一個對象文字都具備ame和age屬性：

var person= [
   { name：「約翰」，age：30 }，
   { name：「簡」，age：32 }，
   { name：「詹姆斯」，age：34 }
];
複製代碼

JavaScript的內置

map（）

方法使您能夠在數組的每一個元素上調用相同的函數。使用傳統的ES5表示法，您能夠經過如下方式返回每一個人的name屬性：

//使用ES5語法進行數組操做
var haveBirthday = person.map（function（person） {
    return person.name;
}）;

console.log（haveBirthday）;
// Array（3）[「約翰」，「簡」，「詹姆斯」]
複製代碼

使用箭頭功能符號，您能夠在一行中執行相同的任務：

//使用ES6語法進行數組操做
var haveBirthday = person.map（person => person.name）;

console.log（haveBirthday）;
// Array（3）[「約翰」，「簡」，「詹姆斯」]
複製代碼

什麼時候不使用箭頭功能

儘管箭頭功能有許多用例，但它們也有一些限制。在某些狀況下，您不能或不該該使用箭頭函數語法。

最重要的是，您不能使用箭頭函數建立構造函數。若是將new關鍵字與粗箭頭語法一塊兒使用，則控制檯將引起錯誤。發生這種狀況是由於JavaScript與對象方法對待箭頭功能的方式相同。結果，它們不能擁有本身的方法，這將是JavaScript對象的基本特徵。

此外，您不能使用ES6語法來聲明對象文字和包含使用this關鍵字的方法的回調函數，由於箭頭函數以不一樣的方式對待它。

總結

箭頭函數爲開發人員提供了有用的快捷方式，能夠用JavaScript編寫函數表達式。箭頭語法有不少用例，所以已迅速成爲JavaScript社區最喜歡的ES6功能。若是一導致用，新的方法能夠節省大量時間和帶寬，並提升代碼的可讀性。

要了解有關JavaScript開發的更多信息，還能夠關注如下公衆號：