为了转生而点技能-JavaScript，day22(Arrow Function介绍

箭头函式(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