javascript es6 多维数组对象相同属性值{key:value}的求和

Posted 2022-08-27 郝艳峰Vip

前言

使用js reduce()方法对多维对象数组内相同属性的值进行求和，并且计算出现的次数。

---

在写这个方法的过程中，了解到一个es7的方法，就是将多维数组转1维数组的方法
flat(params)方法 不传参的话默认把二维数组转为一维数组

要将多维数组转一维数组就需要传入flat(Infinity)

第一，先了解一下flat()转一维数组

    // 多维数组求和并且合并为对应关系
    const sum = [
        [
                id: '350',
                amount: '12',
            , 
                id: '351',
                amount: '134',
            ,
            
                id: '352',
                amount: '14',
            ,
            
                id: '353',
                amount: '48',
            ,
        ],
        [
                id: '350',
                amount: '20',
            , 
                id: '354',
                amount: '123',
            ,
            
                id: '351',
                amount: '1',
            ,
            
                id: '355',
                amount: '107',
            ,
            [
                children:'44444'
            ]
        ],
        [
            [
                children:'3'
            ],
            [
                children:'4'
            ],
        ]
    ];
    const one_dimensional = sum.flat(Infinity); //多维数组转一维数组
    console.log(one_dimensional);
  //flat()  不传参数时  不会将2维以上的多维数组转换
//  (11) […, …, …, …, …, …, …, …, Array(1), Array(1), Array(1)]
//0: id: '350', amount: '12'
//1: id: '351', amount: '134'
//2: id: '352', amount: '14'
//3: id: '353', amount: '48'
//4: id: '350', amount: '20'
//5: id: '354', amount: '123'
//6: id: '351', amount: '1'
//7: id: '355', amount: '107'
//8: […]
//9: […]
//10: […]
//length: 11
//[[Prototype]]: Array(0)

//flat(Infinity)  传参数时   不管几维数组都会转为一维数组
//     (11) […, …, …, …, …, …, …, …, …, …, …]
// 0: id: '350', amount: '12'
// 1: id: '351', amount: '134'
// 2: id: '352', amount: '14'
// 3: id: '353', amount: '48'
// 4: id: '350', amount: '20'
// 5: id: '354', amount: '123'
// 6: id: '351', amount: '1'
// 7: id: '355', amount: '107'
// 8: children: '44444'
// 9: children: '3'
// 10: children: '4'
// length: 11
// [[Prototype]]: Array(0)

第二，相同属性值求和以及计算次数

思路就是：先转一维数组，再求和以及计算出现次数

//原始数组的话，还是用第一步里边的`sum`数据
   /**
     * reduce()方法  将2维数组转为一维数组
     * */
  var single = sum.reduce((acc, cur) => 
        return acc.concat(cur)
    , [])
       /**
     * flat()方法 
     * */
    const one_dimensional = sum.flat(Infinity); //多维数组转一维数组
    var peopleSums = one_dimensional.reduce(function(prev, cur) 
        let sameAttribute = prev.find(i => i.id == cur.id)
        let _object = 
            ...cur,
            OccurrenceTimes: 1,
        
        sameAttribute ? (sameAttribute.amount = sameAttribute.amount * 1 + cur.amount * 1, sameAttribute.OccurrenceTimes++) : prev.push(_object)
        return prev;
    , []);
    console.log(peopleSums);
 //    (7) […, …, …, …, …, …, …]
// 0: id: '350', amount: 32, OccurrenceTimes: 2
// 1: id: '351', amount: 135, OccurrenceTimes: 2
// 2: id: '352', amount: '14', OccurrenceTimes: 1
// 3: id: '353', amount: '48', OccurrenceTimes: 1
// 4: id: '354', amount: '123', OccurrenceTimes: 1
// 5: id: '355', amount: '107', OccurrenceTimes: 1
// 6: children: '44444', OccurrenceTimes: 3, amount: NaN
// length: 7
// [[Prototype]]: Array(0)

---

在本篇博文中使用到es7的reduce()方法，不了解的小伙伴请移步js ,数组求和，数组去重，es7 新增数组方法reduce()的用法详解

结束语

再平时开发中，经常遇到对对象数组内相同属性的值求和，这里记录一下方便自己学习和使用。