JS数组reduce()方法详解及高级技巧

1 语法

arr.reduce(callback,[initialValue])

reduce 为数组中每个元素依次执行回调函数，接受四个参数： 初始值（或者上一次回调函数产生的返回值），当前元素值，当前索引，调用reduce的数组

callback （执行数组中每个值的函数，包含四个参数）

    1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    2、currentValue （数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）

2,实例解析 initialValue 参数

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

打印结果：
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

这里没有提供initialValue参数，所以prev为数字的第一个值，cur为第二个值

如果提供initialValue值的话，prev为initialValue初始值，cur为数组的第一个值。

var  arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0) //注意这里设置了初始值
console.log(arr, sum);

打印结果：
0 1 0
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

3 reduce常用方法如下

数组求和

        let arr = [1,2,3,4,5]

        console.log(arr.reduce((sum,value)=>sum+value));   // 15
        console.log(arr.reduce((sum,value)=>sum*value));   // 120

数组去重

        let arr = [1, 2, 3, 4, 5, 2, 3, 5]
        let newarr = arr.reduce((pre, cur) => {
            if (!pre.includes(cur)) {
                return pre.concat(cur)
            } else {
                return pre
            }
        }, [])
        console.log(newarr);    // [1,2,3,4,5]

对象里面的属性求和

var result = [
    {
        name: 'kobe',
        age: 10
    },
    {
        name: 'jams',
        age: 20
    },
    {
        name: 'paul',
        age: 30
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.age+ prev;
}, 0);
console.log(sum) //60