JS核心-(66)-ES6 章節：箭頭函式-箭頭函式實戰用法

前言

箭頭函式實際運用的情況，介紹哪些變化以及應用是比較常使用到的

搭配陣列的方法 (陣列雙倍)

關於陣列處理的方法有很多種，這邊提供這篇文章給大家參考看看。

這邊就直接進入主題不贅述原理以及使用方法

const arr = [15, 33, 89, 1546, 32555, 78, 5, 90, 449, 1069, 45];
const arrDouble = arr.map(function (num) {
    return num * 2
});
console.log(arrDouble);

這邊利用傳統函式傳入 map，並且將每個數字 (num) double 以後再回傳組成一個新的陣列。

如果使用箭頭函式改寫的話呢？

const arr = [15, 33, 89, 1546, 32555, 78, 5, 90, 449, 1069, 45];
const arrDouble = arr.map(num => num * 2);
console.log(arrDouble);

因為只有 num 一個參數，所以可以去掉 ( )
因為只有一行表達式，並且是要回傳的，可以去掉 return 的字眼以及 { }

這樣縮寫完以後，程式碼不但更精簡，而且效果也是一樣的

搭配陣列的方法 (平均數)

const average = function () {
    const nums = Array.from(arguments);
    const total = nums.reduce(function (acc, val) {
        return acc + val;
    }, 0);

    console.log('total', total);
    return total / nums.length;
};

console.log(average(1,2,3,4,99,5));

這段程式碼主要就是將傳入的參數全部加起來 (reduce)，再除與總數得到平均值。

我們利用 Array.from 將類陣列 average(1,2,3,4,99,5) 轉換成陣列，屬於 ES6 的新增語法。

nums.reduce 的 function ，首先 acc 會先帶入 0 ， val 帶入 average(1,2,3,4,99,5) 裡的 1 ，之後 return acc + val

也就是 0 + 1 等於 1。

接著 return 的這個 1 再繼續帶入 function 的 acc ， val 帶入average(1,2,3,4,99,5) 裡的第二個參數 2 ，

之後 return acc + val 也就是 1 + 2 等於 3。以此方式接續到最後。

reduce 的用法可以參考剛剛上面的文章。

那麼如果使用箭頭函式改寫的話呢？

const average = (...nums) => nums.reduce((acc, val) => acc + val, 0) / nums.length;

console.log(average(1,2,3,4,99,5));

直接就只縮寫成一行，原本的 nums 可以利用之前介紹的其餘參數運算子 (...nums) 進行展開，重新變成陣列。

再套用 reduce 的方法，同樣 reduce 的內部也使用箭頭函式改寫，去掉 return 及 { } ，但因為參數有兩個，

所以不能省略 ( ) 。最後再除上陣列的長度，就可以直接回傳平均數了。

透過上面兩個範例可以了解到，箭頭函式對於精簡程式碼的部分有著非常強大的功用。

物件內的 This

const person = {
    data: {

    },
    getData: function () {
        const vm = this;
        $.ajax({
            url: 'https:randomuser.me/api/',
            dataType: 'json',
            success: function (data) {
                console.log('data', data);
                vm.data = data.results[0];
                console.log('person.data', person.data);
            }
        });
    }
};
person.getData();

這是一個蠻常見的應用，我們首先用 ajax 跟遠端要資料，之後再把資料放入物件裡面的 data 中。

其中為了不讓 this 跑掉，所以特別使用 const vm = this; 來存取 this 的指向，除了 vm 之外，

也常見到使用 that / self 等變數來取代。

箭頭函式要如何在這裡派上用場呢？

const person = {
    data: {

    },
    getData: function () {
        // const vm = this;
        $.ajax({
            url: 'https:randomuser.me/api/',
            dataType: 'json',
            success: data => {
                console.log('data', data);
                this.data = data.results[0];
                console.log('person.data', person.data);
            }
        });
    }
};
person.getData();

我們可以把 suceess 的函式改為箭頭函式，雖然箭頭函式並沒有自己的 this，但它會取用外層的 this 當成自己的 this，

以這樣的狀況來說它就是取用了 getData 的 this。

也就是 person 這個物件，所以我們也就可以把 const vm = this; 給註解掉，讓程式碼更為精簡。

最後介紹一個小工具：https://30secondsofknowledge.com/

把這個小工具加到 chrome 以後，只要在非無痕模式下新增頁籤，就會有不同主題的片段程式碼，並且這些程式碼片段大多都是

使用箭頭函式撰寫的。有特別喜歡的話也可以加入收藏，只要在右下角的地方打開就可以找到有收藏了那些程式碼囉！