javascript 中filter、map、reduce链式调用及使用方式

最近使用数组操作方法比较多，发现这三个函数可以配合一起使用，会很简洁和方便顺便记录分享一下：

举个简单栗子：

const data = [
    {
        name:'apple',
        rate:0.8,
        type:'fruit'
    },
    {
        name:'banana',
        rate:0.62,
        type:'fruit'
    },
    {
        name:'bread',
        rate:0.74,
        type:'food'
    },
    {
        name:'orange',
        rate:0.53,
        type:'fruit'
    }
];

const ret = data.filter(item => item.type =='fruit')
                .map(item => item.rate * 100)
                .reduce((pre,cur)=> pre + cur,0);
console.log(ret)

这里主要是先用filter过滤所有水果类型的元素，然后通过map将元素占比乘以100，最后用reduce求和得到结果

下面介绍下这三个函数的具体使用方法：

filter:过滤数组中的值，返回一个新数组 不会修改原数组的值 

例如： 

const arr = [10,20,8,6,19];
const ret = arr.filter(item => item > 10);//过滤出大于10的元素 放到一个新数组里面
console.log(ret)//[20,19]

 map:对数组中的每一项元素进行操作 然后返回操作后的元素到一个新数组中 不改变原数组

例如：

const arr = [10,20,30,40];
const ret = arr.map(item => item*10);
console.log(ret)//[ 100, 200, 300, 400 ]

reduce：归并方法 对数组每一项累加求和也可用来数组去重

数组求和：

 这里的初始值设置为1 累计求和后得到16 pre是初始值  cur为当前项的值

let num1 = [1,2,3,4,5]
let num2 = num1.reduce((pre,cur)=>{
    return pre + cur 
},1)
console.log(num2) // 16

数组去重：

// 数组去重
const arr = [12,33,15,12,8,45,33,12,8];
const ret = arr.reduce((pre,cur)=>{
    console.log(pre,'pre')
    if(pre.includes(cur)){
        return pre
    }else {
        return [...pre,cur]
    }
},[])
console.log(ret) //[ 12, 33, 15, 8, 45 ]

这里的pre初始值是个空数组,每次累计的时候都会往这个数组里面放去重后的元素，打印出的pre结果为

利用reduce将二维数组转换为一维数组：

//二维数组转换成一维数组
const arr = [
    [12,10],
    [4,8,19],
    [22,44]
];
const ret = arr.reduce((pre,cur)=>{
    return [...pre,...cur]
},[]);
console.log(ret) //[12, 10,  4, 8,19, 22, 44]

计算数组中元素出现次数：

const arr = ['ab','bb','bc','dd','ab','bb','aa','aa','dd'];
const ret = arr.reduce((pre,cur)=>{
    if(cur in pre){//当前值在pre对象属性中则加1
        pre[cur]++;
    }else {//pre对象属性中不存在当前值则给1
        pre[cur] = 1;
    }
    return pre;
},{});

console.log(ret) //{ ab: 2, bb: 2, bc: 1, dd: 2, aa: 2 }