JavaScript中Array的map,filter,redu

前言

 map(),filter(),reduce()是Array中常用的方法，现在总结其相关用法。

map()

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

var arr1=[1,4,9,16,25];
const map1=arr1.map(x=>x*2);
console.log(map1);
//[ 2, 8, 18, 32, 50 ]

这里存在一个常见问题，先看执行结果：

var arr1=[1,4,9,16,25];
const map2=arr1.map(x=>{
    if(x===4){
        return x*2;
    }
})
console.log(map2);
//[ undefined, 8, undefined, undefined, undefined ]

为什么会出现四个undefined呢？而不是我预期的[1,8,9,16,25]？这就需要看看map的作用了，在回忆下map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。map()方法创建了一个新数组，但新数组并不是在遍历完arr1后才被赋值的，而是每遍历一次就得到一个值。所以，下面这样修改后就正确了：

const map3=arr1.map(x=>{
    if(x===4){
        return x*2;
    }
    return x;
})
console.log(map3);

filter()

filter()方法会创建一个新数组，原数组的每个元素传入回调函数中，回调函数中有return返回值，若返回值为true，这个元素保存到新数组中；若返回值为false，则该元素不保存到新数组中；原数组不发生改变。也就是说：满足条件的才会被返回

var arr1=[1,2,3,6,8,9,11];
const filter1=arr1.filter(x=>x%2!==0);
console.log(filter1);
//[ 1, 3, 9, 11 ]

reduce()

reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数。

var arr1=[2,3,4,5,6];
const reduce1=arr1.reduce((pre,item)=>{
    return pre+item;
},10);
console.log(reduce1);
//30

总结

这些方法是Array中的高阶函数，合理的使用能够大大提高工作效率。
本节代码