Javascript 进阶 9-4 箭头函式实战用法

这篇文章会介绍箭头函式实际运用的情况!

虽然箭头函式有很多好处，但其实可以变化的地方很多，也可以搭配很多不同的语法进行变化，还是需要多多练习才能熟悉如何变化以及使用。

这篇文章一样也会带几个範例给大家看看，那些变化以及应用是比较常使用到的!

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

这样缩写完以后，程式码不但更精简，而且效果也是一样的喔!

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 以后，只要在非无痕模式下新增页籤，就会有不同主题的片段程式码。并且这些程式码片段大多都是使用箭头函式撰写的。

有特别喜欢的话也可以加入收藏，只要在右下角的地方打开就可以找到有收藏了那些程式码喔!

以上就是这篇文章的介绍，如果没有问题的话我们就往下一篇文章迈进噜~!汪汪~