這篇文章主要介紹了深入理解JavaScript中的箭頭函數,文中主要針對ES6版本的JS進行相關的講解,需要的朋友可以參考下

從一開始箭頭就是 JavaScript 的一部分，在第一個 JavaScript 中就建議將內聯的腳本代碼包裹在 HTML 的注釋中，這可以防止那些不支持 JavaScript 的瀏覽器錯誤滴將你的代碼顯示為明文。你也許寫過下面這樣的代碼：

1. <script language="javascript"> 
2. <!-- 
3. document.bgColor = "brown"; // red 
4. // --> 
5. </script> 
6.  
7. <script language="javascript"> 
8. <!-- 
9. document.bgColor = "brown"; // red 
10. // --> 
11. </script> 

古老的瀏覽器將看到兩個不被支持的標簽和一段注釋，只有支持 JavaScript 的新瀏覽器才會將其解析為 JavaScript 代碼。

為了支持這個古怪的特性，瀏覽器的 JavaScript 引擎把 也表示一個單行注釋，與 HTML 不同的是，在 HTML 中，--> 之前的部分是注釋內容，而在 JavaScript 中，在 --> 之后的行才是注釋。

只有當 --> 出現在一行的開始時，才表示該箭頭是一個注釋，因為在其他情況下，--> 是一個操作符(goes to)。

1. function countdown(n) { 
2. while (n-->0) // "n goes to zero" 
3. alert(n); 
4. blastoff(); 
5. } 
6.  
7. function countdown(n) { 
8. while (n-->0) // "n goes to zero" 
9. alert(n); 
10. blastoff(); 
11. } 

上面代碼是真實能運行的。循環運行直到 n 為 0，這并不是 ES6 的新特性，但結合我們熟悉的特性，這具有很強的誤導性。你能搞明白上面代碼的運行情況嗎?你可以在 Stack Overflow 上找到相應的解答。

當然還有一個箭頭，那就是小于等于操作符 <=，也許你還可以找到使用箭頭的地方，但我們還是停下來，看一個我們從沒見過的箭頭：

goes to 操作符

<= 小于等于操作符

=> ???

那么，=> 表示什么呢?這就是本文將討論的話題。

首先，我們來談談函數。

無處不在的函數表達式

JavaScript 一個有趣的特點是，任何時候你需要一個函數，你可以很方便地創建它們。

例如，為一個按鈕綁定點擊事件：

1. $("#confetti-btn").click( 
2.  
3. $("#confetti-btn").click( 

jQuery 的 .click() 方法需要一個函數作為參數，我們可以很方便地就地創建一個函數：

1. $("#confetti-btn").click(function (event) { 
2. playTrumpet(); 
3. fireConfettiCannon(); 
4. }); 
5.  
6.  
7. $("#confetti-btn").click(function (event) { 
8. playTrumpet(); 
9. fireConfettiCannon(); 
10. }); 

現在對我們來說，編寫這樣的代碼是最自然的事了。但是在 JavaScript 流行起來之前，這種風格的代碼看起來還是有些奇怪，因為在其他語言中都沒有這樣的特性。在 1958 年，Lisp 就有了函數表達式，也叫 lambda 函數，而在存在多年的 C++、Python、C# 和 Java 中沒有該特性。

現在，這四門語言都有了 lambda 表達式，而且新出現的語言都普遍內置了 lambda 表達式。如今 JavaScript 也支持該特性了，這必須感謝那些重度依賴 lambda 表達式的庫的開發者，這推動了該特性被廣泛采納。

與其他幾門語言相比，JavaScript 的語法略顯冗長：

1. // A very simple function in six languages. 
2. function (a) { return a > 0; } // JS 
3. [](int a) { return a > 0; } // C++ 
4. (lambda (a) (> a 0)) ;; Lisp 
5. lambda a: a > 0 # Python 
6. a => a > 0 // C# 
7. a -> a > 0 // Java 
8.  
9. // A very simple function in six languages. 
10. function (a) { return a > 0; } // JS 
11. [](int a) { return a > 0; } // C++ 
12. (lambda (a) (> a 0)) ;; Lisp 
13. lambda a: a > 0 # Python 
14. a => a > 0 // C# 
15. a -> a > 0 // Java 

箭頭函數

ES6 引入了一種新的語法來編寫函數：

1. // ES5 
2. var selected = allJobs.filter(function (job) { 
3. return job.isSelected(); 
4. }); 
5.  
6. // ES6 
7. var selected = allJobs.filter(job => job.isSelected()); 
8.  
9.  
10. // ES5 
11. var selected = allJobs.filter(function (job) { 
12. return job.isSelected(); 
13. }); 
14.  
15. // ES6 
16. var selected = allJobs.filter(job => job.isSelected()); 

當你需要只有一個參數的函數，箭頭函數的語法可以簡化為 Identifier => Expression，直接省略了 function 和 return 關鍵字，連括號和結尾的分號也同時省略了。

編寫一個有多個(或沒有參數，或 Rest 參數和參數默認值，或解構參數)參數的函數，你需要用括號將參數括起來：

1. // ES5 
2. var total = values.reduce(function (a, b) { 
3. return a + b; 
4. }, 0); 
5.  
6. // ES6 
7. var total = values.reduce((a, b) => a + b, 0); 
8.  
9. // ES5 
10. var total = values.reduce(function (a, b) { 
11. return a + b; 
12. }, 0); 
13.  
14. // ES6 
15. var total = values.reduce((a, b) => a + b, 0); 

箭頭函數還可以與一些工具函數庫完美地配合使用，比如 Underscore.js 和 Immutable，事實上，Immutable 文檔中的例子全部都是使用 ES6 編寫，其中有很多已經使用到了箭頭函數。

函數體除了使用一個表達式外，箭頭函數還可以包含一個語句塊，回憶之前我們提到過的例子：

1. // ES5 
2. $("#confetti-btn").click(function (event) { 
3. playTrumpet(); 
4. fireConfettiCannon(); 
5. }); 
6.  
7. // ES5 
8. $("#confetti-btn").click(function (event) { 
9. playTrumpet(); 
10. fireConfettiCannon(); 
11. }); 

下面是采用箭頭函數的寫法：

1. // ES6 
2. $("#confetti-btn").click(event => { 
3. playTrumpet(); 
4. fireConfettiCannon(); 
5. }); 
6.  
7. // ES6 
8. $("#confetti-btn").click(event => { 
9. playTrumpet(); 
10. fireConfettiCannon(); 
11. }); 

需要注意的是，使用語句塊的箭頭函數不會自動返回一個值，必須顯式地使用 return 來返回一個值。

還有一個忠告，當使用箭頭函數來返回一個對象時，始終使用括號將返回的對象括起來：

1. // create a new empty object for each puppy to play with 
2. var chewToys = puppies.map(puppy => {}); // BUG! 
3. var chewToys = puppies.map(puppy => ({})); // ok 
4.  
5.  
6. // create a new empty object for each puppy to play with 
7. var chewToys = puppies.map(puppy => {}); // BUG! 
8. var chewToys = puppies.map(puppy => ({})); // ok 

因為空對象 {} 與空語句塊 {} 看上去一模一樣，ES6 將始終把緊跟在 => 后面的 { 當作語句塊的開始，而不是一個對象的開始，那么 puppy => {} 就被解析為一個沒有函數體的箭頭函數，而且返回值為 undefined。