ES6学习笔记（三）箭头函数简化数组函数的使用

接触ES6之前一看到箭头函数，脑子里真的是一堆问号，不知道到底写的什么东西，但是看了一些资料了解之后，觉得也是挺容易使用的，而且在一些场合特别方便，尤其是在使用数组函数的时候，所以就把箭头函数简化数组的内容做了份笔记写下来。

首先是关于箭头函数的使用，直接上代码看好了

//ES5
function fn1(){};
function fn2(a){};
function fn3(a,b,c){};

//ES6
let fn1=()=>{};
let fn2=a=>{};
let fn3=(a,b,c)=>{};

上面的部分代码就是ES5的函数声明的写法，而在ES6中，我们把参数放在“()”内，后面跟着“=>”，函数体就放在“{}”的代码块中。当函数的参数只有一个时，可以省去括号，而如果函数体中只有一行代码的话，也可以把"{}"省略掉。

let fn=a=>console.log(a);

箭头函数的基本用法大概就是这样，我们来看看它实际运用到下面几个数组函数的实例，在写下这几个函数的简化前，我会先写下我对这几个函数的理解和用法

map函数

在我看来map函数就是对数组中的每个值进行同样的操作然后返回一个同样长度，位置上一一对应的数组，就好像数学上的映射一样，数组中的每个值通过一定的操作后得到一个对应的值。在ES5中，我们可以直接这样写：

let arr=[12,32,43,24];
let doubleArr=arr.map(function(item){//参数item为数组中的值
    item=item*2;
});
//[24,64,86,48]

let judgeArr=arr.map(function(item){
    if(item>30)
        return true;
    else
        return false;
});
//[false,true,true,false]

而在ES6中，我们通过箭头函数和三目运算符，可以把代码变为一行，而且看起来更加简洁

let arr=[12,32,43,24];
let doubleArr=arr.map(item=>item=item*2);
//[24,64,86,48]

let judgeArr=arr.map(item=>item>30?true:false);
//[false,true,true,false]

reduce函数

reduce函数不同于map函数，虽然它也是数组函数，但是它只返回一个值，在不自己添加return前，它返回最后一次的中间值。它有三个参数，第一个参数是一个中间值，是函数上一步返回的结果，而因为reduce函数是从下标为1的位置开始遍历的，所以它的第一个中间值为数组的第一个数的值，后面的中间值等于上一趟遍历的返回值；第二个参数即为遍历的数组内的值；第三个参数为数组的值对应的下标。

var arr=[12,32,53];
arr.reduce(function(temp,item,index){
    console.log("temp:"+temp+"  item:"+item+"  index:"+index);
})
//temp:12  item:32  index:1        第一次temp值为arr[0]的值
//temp:undefined  item:53  index:2 第二次因为第一次遍历没返回值，所以为undefined

对应可以用reduce函数方便地求出数组内的值的总数和平均数

//求总数
var arr=[12,32,53];
var sum=arr.reduce(function(temp,item,index){
    return temp+item;//每次将返回值和当前值相加，最终就会的出总数
})
//97

var avg=arr.reduce(function(temp,item,index){
    if(index==arr.length-1)
        return (temp+item)/arr.length;//当下标为长度减一时除以数组长度得到平均值
    else
        return temp+item;
})
//32.333333333333336

ES6箭头函数的简写

let arr=[12,32,53];
let sum=arr.reduce((temp,item,index)=>temp+item);
let avg=arr.reduce((temp,item,index)=>index==arr.length-1?(temp+item)/arr.length:temp+item);

filter函数

关于filter函数，我觉得它的英文翻译过来就很贴切地形容了它的功能了，过滤器。filter函数与map函数一样，也是返回一个数组，而且也会对数组中的每一个数进行相同的操作，不同的是，filter函数并不会一一对应返回相同长度的数组。filter函数返回的数组长度小于等于原数组的长度，filter函数通过对原数组进行一定的操作，返回true或false，返回true的数就添加到要返回的新数组中，返回false的数则被“过滤”掉。

var arr=[23,54,26,62,45,93,15]
var newArr=arr.filter(function(item){
    if(item%3==0)//新数组返回原数组中可以整除以3的数
        return true;
    else
        return false;
});
//[54, 45, 93, 15]

ES6箭头函数的简写

let arr=[23,54,26,62,45,93,15]
let newArr=arr.filter(item=>item%3==0);
//[54, 45, 93, 15]

//因为item%3==0刚好是个布尔值，所以直接作为返回值，不用使用三目运算符

箭头函数虽然使用方便，但也有些地方需要注意

1.如果箭头函数最终要直接返回一个对象，要注意使用两个"{}"嵌套，外层的"{}"是包含代码块的，内层才是对象，如果只写一个{}，会得到报错的结果

let fn=()=>{a:1,b:2}
//Uncaught SyntaxError: Unexpected token

有一种特殊情况不会报错，即对象中只有一个属性值，但那样最后返回的不是一个返回值，如下面的代码

var fn=()=>{a:1}
//undefined

这段代码虽然没有报错，但它最后会返回undefined，这是因为在箭头后面的并没有被认为是一个对象，而是一个代码块，整个函数被认为是函数体为a:1的函数，即在函数内部执行了a:1的语句，并没有返回什么值

2.箭头函数没有自己的this，arguments，super

如果在箭头函数中使用this，arguments，super的话，它会调用外部代码块的this，arguments，super，正是由于这样，箭头函数不能使用构造函数。

如果要调用箭头函数的参数的话，可以使用rest参数获取传入的参数。

参考自阮一峰的《ECMAScript6入门》

ES6学习笔记（三）箭头函数简化数组函数的使用

猜你喜欢