你看懂“箭頭函數”了么？

文章目錄

1. 1. 從改造開始
2. 2. 關於解構
3. 3. 說說案例
   1. 3.1. 回調函數
   2. 3.2. rest參數結合

ES6 允許使用“箭頭”（=>）定義函數。如果了解 Java 的 Lambda 表達式，回過頭來理解 ES6 的箭頭函數，就非常好理解了。

參考之前分享的《Java8 特性詳解（一） Lambda》的講解流程，我們在看下 ES6 的內容吧。

從改造開始

首先，我們從一個例子開始，在 ES5 中，我們一般是這么書寫的。

1. var sum1 = function(num1, num2) {
2. return num1 + num2;
3. };

那么，改造成箭頭函數，它是什么樣子呢？

1. var sum2 = (num1, num2) => { return num1 + num2;};

小括號內的參數列表和花括號內的代碼被 => 分隔開了。這個就是箭頭函數的魅力，箭頭函數使得表達更加簡潔，從而簡化了我們的代碼。

如果一個表達式的代碼塊, 只是 return 后面跟一個表達式，那么還可以進一步簡化。

1. var sum3 = (num1, num2) => num1 + num2;

如果某個方法只含有一個參數。

1. console.info("=> ES5 寫法");
2. var curf1 = function(v) {
3. return v;
4. };

我們甚至可以省略小括號。

1. console.info("=> ES6 寫法");
2. var curf2 = v => v;

如果某個方法沒有參數。

1. console.info("=> ES5 寫法");
2. var f1 = function() {
3. return "梁桂釗";
4. };

我們仍可以提供一對空的小括號，如同不含參數的方法。

1. console.info("=> ES6 寫法");
2. var f2 = () => "梁桂釗";

這里，補充一個例外，如果箭頭函數直接返回一個對象，必須在對象外面加上括號。

1. console.info("=> ES5 寫法");
2. var f3 = function() {
3. return {
4. real_name: "梁桂釗",
5. nick_name: "LiangGzone"
6. }
7. };
8. console.log(f3());
9.  
10. console.info("=> ES6 寫法");
11. var f4 = () => ({real_name: "梁桂釗",nick_name: "LiangGzone"});
12. console.log(f4());

關於解構

我們還可以使用到 ES6 解構賦值特性。ES5 寫法，之前是這樣的。

1. var f5 = function(person) {
2. return person.first + ' ' + person.last;
3. }

使用到 ES6 解構賦值特性后，就更加好理解了。

1. const f6 = ({ first, last }) => first + ' ' + last;

說說案例

列舉兩個摘自阮一峰的《ECMAScript 6 入門》的案例。

回調函數

我們經常使用回調函數，之前的常規的做法。

1. console.info("=> ES5 寫法");
2. var x1 = [1,2,3].map(function (x) {
3. return x * x;
4. });
5. console.info(x1);

那么，現在我們可以進行改造。

1. console.info("=> ES6 寫法");
2. var x2 = [1,2,3].map(x => x * x);
3. console.info(x2);

rest參數結合

沒有使用箭頭函數，之前，我們的代碼可能長這樣子。

1. console.info("=> ES5 寫法");
2. var x3 = function(...nums){
3. return nums;
4. }
5. console.info(x3(512, 1024));

那么，現在我們可以進行改造。

1. console.info("=> ES6 寫法");
2. var x4 = (...nums) => nums;
3. console.info(x4(512, 1024));