這篇文章會介紹箭頭函式實際運用的情況!

雖然箭頭函式有很多好處，但其實可以變化的地方很多，也可以搭配很多不同的語法進行變化，還是需要多多練習才能熟悉如何變化以及使用。

這篇文章一樣也會帶幾個範例給大家看看，那些變化以及應用是比較常使用到的!

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

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

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

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);

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

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

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

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 將類陣列轉換成陣列，屬於 ES6 的新增語法。

而 Reduce 的用法就可以參考剛剛上面的文章。

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

const average = (...nums) => nums.reduce((acc, val) => acc + val, 0) / nums.length;
        
console.log(average(1,2,3,4,99,5));

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

再套用 reduce 的方法，同樣 reduce 的內部也使用箭頭函式改寫，去掉 return {}，但因為參數有兩個，所以不能省略()。

最後在除上陣列的長度，就可以直接回傳平均數了!

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

3. 物件內的 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 以後，只要在非無痕模式下新增頁籤，就會有不同主題的片段程式碼。並且這些程式碼片段大多都是使用箭頭函式撰寫的。

有特別喜歡的話也可以加入收藏，只要在右下角的地方打開就可以找到有收藏了那些程式碼喔!

以上就是這篇文章的介紹，如果沒有問題的話我們就往下一篇文章邁進嚕~!汪汪~