JavaScript ES6 - 箭头函式(arrow function)

箭头函式不同于一般传统函式，可以带来更直观更简洁的写法。

箭头函式结构:

传统函式如下:

const Fn = function (){    return `Hi`;}

而箭头函式的结构如下:

const arrFn = () => {    return `Hi`;}

除了省略了关键字 function 之外，还有一个更关键的 => 箭头。

带有参数时候的差异性:

传统函式如下:

const Fn = function (name){    return name;}

箭头函式如下:

const arrFn = (name) => {    return name;}

可以看的出来箭头函式的参数是放在 () 内的
而在只有一个参数时，还可以更精简的缩写如下:

const arrFn = name => {    return name;}

可以直接省略 ()，这是在仅有一个参数的情况下才可以省略，两个以上的参数时，不能省略
这样就结束了吗? 当然还没!
当要直接 return 一个值的时候，还可以更精简:

const arrFn = name => name;

除了省略了 {} 还直接省略了关键字 return

到这里已经是叹为观止了 !!!

但跟传统函式还有其他的不同之处 ~~

箭头函式没有 arguments 参数

传统函式如下:

const nums = function (){    console.log(arguments);}nums(10,20,30);

在传统函式时，我们可以使用 arguments 参数，把带入的值一一取出来，而 arguments 是一个类阵列。
箭头函式如果使用 arguments 参数时，会直接跳错，这个时候想做到一样的结果，就可以使用其余参数，而且带出来的值，不会是类阵列，而是纯阵列:

const nums = (...arg) => {    console.log(arg)}nums(10,20,30);

this 的差异性

箭头函式跟传统函式，莫过于 this 的指向，看下面的例子:

var myName = '全域';var person = {    myName: '小明',    callName: function(){        console.log(this.myName);  // 小明        setTimeout(function(){            console.log(this.myName); // 全域        },10);    }};person.callName();

在呼叫 person 物件的 callName function 的时候，this 的指向是物件本身，但在里面还有一个 setTimeout 的 callBack function 这时候 this 的指向就会是全域环境
如果把 setTimeout 改成箭头函式:

var person = {    myName: '小明',    callName: function(){        console.log(this.myName);  // 小明        setTimeout(() => {            console.log(this.myName); // 小明        },10);    }};

这时候 this 的指向都会是小明，这是因为箭头函式没有自己的 this 所以只能向外面一层去寻找
同理可证，如果把 callName 也改成箭头函式:

var person = {    myName: '小明',    callName: () => {        console.log(this.myName);  // 全域        setTimeout(() => {            console.log(this.myName); // 全域        },10);    }};

这时候呼叫 callName function，this 的指向就会是全域，setTimeout 随着外层的 this 指向改变，也只能指向全域。

2020/06/25 新增:

箭头函式回传物件

传统函式回传物件:

const Fn = function (){    return {        num: 1    }};

此时一样的模式在箭头函式:

const arrFn = () => { num: 1};

这时候会跳错，箭头函式并不能用这样的方式直接回传物件，若真的要回传一个物件格式，务必如下:

const arrFn = () => ({ num: 1 });

记得用 () 包起来

箭头函式搭配判断式

传统函式搭配判断式:

let num = 0;const numFn = num || function(){    return 1;}

这时候呼叫 numFn 是会回传 1
如果改成箭头函式:

const arrFn = num || () => 1

这时候就会跳错了，但真的也想回传这个箭头函式，也请用 () 包起来

const arrFn = num || (() => 1)