数组归并方法reduce（）总结

数组归并方法reduce（）

ECMAScript为数组提供了两个归并方法：reduce（）和 reduceRight（）。

相同点：

迭代数组的所有项，在此基础上构建一个返回值。

不同点：

reduce（）从数组第一项开始遍历到最后一项；（从左开始）

reduceRight（）从数组最后一项开始遍历到第一项。（从右开始）

以ruduce（）为例（ reduceRight（）方法与之类似，遍历方向相反）

reduce（）接收两个参数：对每一项都会运行的归并函数，可选的归并起点值。

对每一项都会运行的归并函数，即传给ruduce（）的函数接收四个参数：

上一个归并值prev、当前值cur、当前索引值index、数组本身array。（这个函数的返回值作为下一次调用该函数的第一个参数）

归并起点值：若未设归并起点值，则第一次迭代从数组第二项开始，因此传给归并函数的第一个参数prev是数组的第一项，第二个参数cur是数组的第二项。

arr.reduce( function ( prev, cur, index, array){}, 归并起点值);

1、数组求和、数组求乘积（未设归并起点值）

// 1.数组求和
        let arr = [1, 2, 3, 4, 5];
        let sum = arr.reduce((prev, cur) =>  prev + cur);
        console.log(sum);//15

或

// 1.数组求和
        let arr = [1, 2, 3, 4, 5];
        let sum = arr.reduce((prev, cur) => {
            return prev + cur
        });
        console.log(sum);//15

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

        // 2.计算数组中每个元素出现的此时
        let names = ['aa', 'bb', 'cc', 'aa', 'bb'];
        //创建nameNum对象存储元素及出现次数
        let nameNum = names.reduce((prev, cur) => {
            if (!prev[cur]) {
                prev[cur] = 1;
            }
            else {
                prev[cur]++;
            }
            return prev;
        }, {})
        console.log(nameNum);

3、简单的数组去重

       // 3、简单的数组去重
        let arr3 = [1, 1, 1, 2, 3, 4, 4, 5];
        // 创建newArr数组对象存储去重后的数组
        let newArr = arr3.reduce((prev, cur) => {
            if (!prev.includes(cur)) {
                // console.log(typeof prev);//object
                // console.log(typeof cur);//number
                //不同类型不能prev.push(cur)
                return prev.concat(cur);
            }
            else {
                return prev;
            }
        }, []);
        console.log(newArr);//[1, 2, 3, 4, 5]

4、数组对象去重

       // 4.数组对象去重
        let arr = [
            { name: 'mom', id: 1 },
            { name: 'timo', id: 2 },
            { name: 'mom', id: 1 },
            { name: 'timo', id: 2 },
        ]
        // obj对象存放id属性，过渡
        let obj = {}
        let newArr = arr.reduce((prev, cur) => {
            // console.log(typeof prev);//object
            // console.log(typeof cur);//object
            //法1
            // obj[cur.id] ? "" : (obj[cur.id] = true && prev.push(cur));
            //法2
            if(!obj[cur.id]){
                prev.push(cur);
                obj[cur.id]=true;
            }
            return prev;
        }, [])
        console.log(obj);
        console.log(newArr);// [{name: 'mom', id:1}, {name: 'timo', id:2}]

5、二维数组转化为一维数组

     // 5、二维数组转化为一维数组
        let arr = [[0, 1], [2, 3], [4, 5]]
        let newArr = arr.reduce((prev, cur) => {
            return prev.concat(cur)
        }, [])
        console.log(newArr); // [0, 1, 2, 3, 4, 5]

6、多维数组转化为一维数组（递归）

   // 6、多维数组转化为一维数组（递归）
        let arr = [1, [2, 3, [4, [5]]]];
        let newArr = function (arr) {
            return arr.reduce((prev, cur) => {
                 return prev.concat(Array.isArray(cur) ? newArr(cur) : cur)
            }, [])
        }
        console.log(newArr(arr));// [1, 2, 3, 4, 5]

参考资料

[1] 红宝书（第四版）
[2] reduce()方法详解