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

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

看到这个方法时，学习了下

---

一、reduce是什么？

JavaScript中关于数组的高阶方法，目前可以使用做，累加、累乘、去重、查看在数组中出现的次数等

arr.reduce(callback,[initialValue])

        
使用方法
        callback （执行数组中每个值的函数，包含四个参数）
        1、previousValue （上一次调用回调返回的值，或者是提供的初始值/相当于默认值（initialValue））
        2、currentValue （数组中当前被处理的元素）
        3、index （当前元素在数组中的索引）
        4、array （调用 reduce 的数组）
        initialValue （作为第一次调用 callback 的第一个参数。）
    

二、使用方法

1.累加累乘计算方法

代码如下（示例）：

   var arr = [1, 2, 3, 4];
    var sum = arr.reduce((x, y) =>{
        console.log( "x--"+x,"y--"+y)
        return x+y
    } )
    var mul = arr.reduce((x, y) => x * y)
    console.log(sum); //求和，10
    console.log(mul); //求乘积，24

2.计算数组中每个元素出现的次数

代码如下（示例）：

    let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
    let names = ['a', 'b', 'c', 'n', 'b'];
    let nameNum = names.reduce((pre, cur) => {
        // in 代表pre里面包好cur数据
        if (cur in pre) {
            pre[cur]++
        } else {
            pre[cur] = 1
        }
        return pre
    }, {})
    console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

3.数组去重

代码如下（示例）：

    let arr = [1, 2, 3, 4, 4, 1]
    let newArr = arr.reduce((pre, cur) => {
        console.log(pre, cur)
        // 检测pre数组中是否存在已经存进取的数，
        // pre自定义为数组，一开始为[],当执行一次pre里面加一个

        if (!pre.includes(cur)) {
            // 如果不存在,合并数组
            return pre.concat(cur)
        } else {
            return pre
        }
    }, [])
    console.log(newArr); // [1, 2, 3, 4]

4.将二维数组转化为一维

代码如下（示例）：

 let arr = [
        [0, 1],
        [2, 3],
        [4, 5]
    ]
    let newArr = arr.reduce((pre, cur) => {
        return pre.concat(cur)
    }, [])
    console.log(newArr); // [0, 1, 2, 3, 4, 5]

4.将多维数组转化为一维

代码如下（示例）：

     let arr = [
        [0, 1],
        [2, 3],
        [4, [5, 6, 7]]
    ]
    const newArr = function (arr) {
        return arr.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? newArr(cur) : cur), [])
    }
    console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

5.对象里的属性求和

代码如下（示例）：

     var result = [
        {
            subject: 'math',
            score: 10
        },
        {
            subject: 'chinese',
            score: 20
        },
        {
            subject: 'english',
            score: 30
        }
    ];

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

---

总结

提示：只要区别pre和cur的关系
来源 https://www.jianshu.com/p/e375ba1cfc47