Array数组reduce方法与数组累加、去重

快速阅读

一、reduce

        定义

        例子

二、数组累加

三、灵活使用

四、数组去重

---

一、reduce

        定义

        reduce是一个聚合的方法，它可以将数组中的每一项通过叠加变成一项。

        例子

var arr = [1,2,3];
arr.reduce((pre,cur) => {
    console.log(pre)
    console.log(cur)
},0);
// 0,1
// undefined,2
// undefined,3

var arr = [1,2,3]
arr.reduce((pre,cur) => {
    console.log(pre)
    console.log(cur)
})
// 1,2
// undefined,3

var  arr = [1, 2, 3, 4, 5];
arr.reduce(function(prev, cur, index) {
    console.log(prev);
    console.log(cur);
    console.log(index);
})
console.log(arr); // 返回[1, 2, 3, 4, 5];

        输出结果：

        1，2，1

        undefined，3，2

        undefined，4，3

        undefined，5，4

        可以看到，上例中其实值遍历了4次，数组有五项。数组中的第一项被当做了prev的初始值，而遍历从第二项开始。

        为什么会出现undefined？ 因为第一个prev指的是数组第一项的值，而后面的prev指的是每一次叠加的结果，而reduce函数中缺少了对参数的处理，所以是undefined

var  arr = [1, 2, 3, 4, 5];
sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prevres + cur;
})
console.log(arr, sum);

        1，2，1

        3，2，2

        6，4，3

        10，5，4

         [1, 2, 3, 4, 5] ，15

1. prev: 第一项的值或上一次叠加的结果值
2. cur: 当前会参与叠加的项
3. index： 当前值的索引
4. arr: 数组本身

二、数组累加

var result = [
    {
        name: 'Lisa',
        score: 88
    },
    {
        name: 'Mike',
        score: 95
    },
    {
        name: 'Alan',
        score: 80
    }
];

         我们要对三位同学的成绩进行累加求得该小组的总分。最常用的方法无非

var sum = 0;
for(var i=0; i<result.length; i++) {
    sum += result[i].score;
}

         使用reduce解决这个问题

var sum = result.reduce(function(prev, cur) {
    console.log(prev)    // 0
    console.log(cur)       // {name:'小明',score:88}
    return cur.score + prev;
}, 0);
console.log('总数是' + sum)

        可以看到添加了第二个参数，0，这第二个参数就是设置prev的初始类型和初始值，比如为0，就表示prev的初始值为number类型，值为0，因此，reduce的最终结果也会是number类型。同时设置起始值后，reduce函数将从第一项开始遍历。

        还能怎么玩？这三个同学这学期老是迟到，我想给他们三个人的小组总分扣掉20分，那我便可以：

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, -20);

        如果我们想调整小组的总分计算方式，改成由20%、40%、40%的组成计算方式，我们可以：

const prop = {
    Lisa: 0.2,
    Mike: 0.4,
    Alan: 0.4
}
const sum = result.reduce((prev,cur) =>  {
    return prev + cur.score * prop[cur.name]
},0)

三、灵活使用

        由于可以通过第二参数设置叠加结果的类型初始值，因此这个时候reduce就不再仅仅只是做一个加法了，我们可以灵活的运用它来进行各种各样的类型转换，比如将数组按照一定规则转换为对象，也可以将一种形式的数组转换为另一种形式的数组。

        场景一：统计字符串中每个字符出现的次数

const str = 'I am SuperMan';
str.split('').reduce((result,cur) => {
    result[cur] ? result[cur] ++ : result[cur] = 1
    return result
},{})

        

        场景二： 数组元素各加1

[1, 2].reduce(function(res, cur) { 
    res.push(cur + 1); 
    return res; 
}, [])

四、数组去重

        通过reduce+includes我们可以轻松实现数组去重

const arr = [1,2,2,4,5,7,1,8]
arr.reduce((res,cur)=>{
    res = res.includes(cur) ? res : [...res,cur]
    return res
},[])