箭頭函式(arrow Function)：

前提：需為函式表達式。

方法：

1. function省略並在參數後面加上=>。
2. 如果，函式內的執行碼為表達式，則參數後面的{}及return去掉並改成。
3. 如果參數只有一個，則連參數的()都可以省略。

        const family = function (params) {return console.log('函式的參數: ' + params)}
        family(10);           //函式的參數: 10
        
        const family03 = (params) => {return console.log('函式的參數: ' + params)}
        family03(30);         //函式的參數: 30
               
        const family02 = (params) => console.log('函式的參數: ' + params);
        family02(20);         //函式的參數: 20

PS1：如果依照上述第2點規則，且回傳的值是物件實字，則會出現undefined，需要用（{})包裹。

        const fn = function () {
            return {
                data: 1,
                name: 'TOM',
            };
        };
        console.log(fn());              //{data: 1, name: 'TOM'}

        const arrowfn = () => {};
        console.log(arrowfn());        //undefined
        
        const arrowfn01 = () => ({});
        console.log(arrowfn01());      //{}

**PS2：**如果依照上述第2點規則，箭頭函式搭配判斷子，則會報錯，依樣需要用（)包裹。

        let number = 0;
        const numberFn = number || function (param) { console.log(param) };

        numberFn(100);     //100

        let number01 = 0;
        const numberFn01 = number01 || ((param) => { console.log(param) });

        numberFn01(200);    //200

與傳統函式不同的地方

1.缺乏內建arguments：傳統函式會內建argument，可以把傳入函式的參數，全部以類似陣列的形式呈現出來；但是箭頭函式無法，必須在參數內輸入...變數(稱為其餘參數)，才可以。
2.this
3.箭頭函式無法當作建構函式

        const family = function () {
            return console.log(arguments)
        }
        family(10, 20, 30);  //Arguments(3) [10, 20, 30, callee: ƒ, Symbol(Symbol.iterator): ƒ]
        
        
        const family = () => {
            return console.log(arguments)
        }
        family(10, 20, 30);  //Uncaught ReferenceError: arguments is not defined
        
        
        
        const family = (...varible) => {
            return console.log(varible)
        }
        family(10, 20, 30);   //(3) [10, 20, 30]

與傳統函式不同的地方

1.沒有arguments
2.this：
傳統函式的this：與this如何被呼叫有關。
箭頭函式的this：依據所屬的函式在哪裡建立而決定。
call、apply、bind失效：無法指定this的指向。
3.箭頭函式無法當作建構函式

       
        const fn = function () {     // 傳統 function 的寫法
            console.log(this);
        };
        fn();                        // Window Object

      
        const arrowFn = () => {       //arrow Function在全域中建立
            console.log(this);
        };
        arrowFn();                    // Window Object，arrowFn()，故指向window。

        var name = '全域阿婆'
        var auntie = {
            name: '漂亮阿姨',
            callName: function () {              //傳統function
                console.log('1', this.name);     // 1 漂亮阿姨
                setTimeout(() => {
                    console.log('2', this.name); // 2 漂亮阿姨
                    console.log('3', this);      // 3 auntie 這個物件
                }, 10);
            },
            callName2: () => {                   //arrow function：屬於全域變數auntie的物件裡面
                console.log('4', this.name);     // 4 全域阿婆
                setTimeout(() => {
                    console.log('5', this.name); // 5 全域阿婆
                    console.log('6', this);      // 6 window 物件
                }, 10);
            }
        }

        var func = function () {
            var func2 = function () {
                setTimeout(() => {
                    console.log(this);
                }, 10);
            };
            
            
            var func3 = {        
                func: func2,
                var4: 4
            }
            func2();      // this = window
            func3.func(); // func3 Object，因為此時的箭頭函式屬於物件內屬性的值。
        }
        func(); 

與傳統函式不同的地方

1.沒有arguments
2.this
3.箭頭函式無法當作建構函式：無法利用箭頭函式來自訂原型。

        const fn = function (name) {
            this.name = name;
        };
        console.log(fn.prototype);    //{constructor: ƒ}
        const TOM = new fn('TOM');    
        console.log(TOM);             //fn {name: 'TOM'}


        const arrowfn = (name) => {
            this.name = name;
        }
        console.log(arrowfn.prototype);  //undefined
        const BOB = new arrowfn('BOB');
        console.log(BOB);                //Uncaught TypeError: arrowfn is not a constructor

範例1：

        const array = [11, 22, 33, 44, 55, 66, 77];
        const array02 = array.map(function (params) { return params * 2 });
        console.log(array02);   //(7) [22, 44, 66, 88, 110, 132, 154]

        const array03 = array.map((params) => params * 2);
        console.log(array03);  //(7) [22, 44, 66, 88, 110, 132, 154]

補充：目標陣列.map為提取目標陣列內的內容，每筆都做編輯。

範例2：

先備知識：

1. Array.from：提取輸入的參數並形成新的陣列
2. .reduce：會對每一個目前迭代到的陣列元素（除了空值以外）執行 callback 函式，函式內有四個參數(accumulator、currentValue、currentIndex(非必要)、array(非必要))，因為是抓取陣列的前一個值跟後面一個值做操作，所以會有個一個initialValue來跟Array[0]搭配。
3. 當回呼函式第一次被呼叫時，accumulator 與 currentValue 的值可能為兩種不同的狀況：若在呼叫 reduce() 時有提供 initialValue，則 accumulator 將會等於 initialValue，且 currentValue 會等於陣列中的第一個元素值；若沒有提供 initialValue，則 accumulator 會等於陣列的第一個元素值，且 currentValue 將會等於陣列的第二個元素值。
4. 本範例為給定參數，求參數和後除以參數的數量。

        const average = function () {
            const nums = Array.from(arguments);
            const total = nums.reduce(function (acc, val) {
                return acc + val
            }, 0);
            return total / nums.length;
        }
        console.log(average(1, 2, 3, 4, 5))   //  15(參數和)/5(參數數量)得3



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

參考文章：

1. 鐵人賽：箭頭函式 (Arrow functions)：https://wcc723.github.io/javascript/2017/12/21/javascript-es6-arrow-function/
2. 前端三十｜10. [JS] 一般函式與箭頭函式的差異？：https://medium.com/schaoss-blog/%E5%89%8D%E7%AB%AF%E4%B8%89%E5%8D%81-10-js-%E4%B8%80%E8%88%AC%E5%87%BD%E5%BC%8F%E8%88%87%E7%AE%AD%E9%A0%AD%E5%87%BD%E5%BC%8F%E7%9A%84%E5%B7%AE%E7%95%B0-32ce9455ff1a