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

箭头函式(arrow Function)：

前提：需为函式表达式。

方法：

function省略并在参数后面加上=>。如果，函式内的执行码为表达式，则参数后面的{}及return去掉并改成。如果参数只有一个，则连参数的()都可以省略。

        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：

先备知识：

Array.from：提取输入的参数并形成新的阵列.reduce：会对每一个目前迭代到的阵列元素（除了空值以外）执行 callback 函式，函式内有四个参数(accumulator、currentValue、currentIndex(非必要)、array(非必要))，因为是抓取阵列的前一个值跟后面一个值做操作，所以会有个一个initialValue来跟Array[0]搭配。当回呼函式第一次被呼叫时，accumulator 与 currentValue 的值可能为两种不同的状况：若在呼叫 reduce() 时有提供 initialValue，则 accumulator 将会等于 initialValue，且 currentValue 会等于阵列中的第一个元素值；若没有提供 initialValue，则 accumulator 会等于阵列的第一个元素值，且 currentValue 将会等于阵列的第二个元素值。本範例为给定参数，求参数和后除以参数的数量。

        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

参考文章：

铁人赛：箭头函式 (Arrow functions)：https://wcc723.github.io/javascript/2017/12/21/javascript-es6-arrow-function/前端三十｜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