js 根据日期 对数组重新分组

Question

原数据：

var data = [
            {"name": "小明","age": "4","birthday": "5-1"},
            {"name": "小黄","age": "4","birthday": "5-1"},
            {"name": "小红","age": "4","birthday": "5-3"},
        ]

希望整理后得到：

var newArr = [
            {
                "birthday":"5-1",
                "detailList":"[ {'name':'小明','age':'4'} , {'name':'小黄','age':'4'}]"
            },
            {
                "birthday":"5-3",
                "detailList":"[ {'name':'小红','age':'4'}]"
            }
        ]; 

我的思路；data数组第0项直接push（birthday+detailList）整个到新数组newArr，但从第1项就要开始去newArr比较birthday，如果birthday相同，就只用push（detailList），如果不同就push { birthday+detailList }

遇到问题：重复打印了一些数据

我的代码：`var data = [

        {"name": "小明","age": "4","birthday": "5-1"},
        {"name": "小黄","age": "4","birthday": "5-1"},
        {"name": "小红","age": "4","birthday": "5-3"},
    ]
    
    //[希望得到]
    // var newArr = [
    //     {
    //         "birthday":"5-1",
    //         "detailList":"[ {'name':'小明','age':'4'} , {'name':'小黄','age':'4'}]"
    //     },
    //     {
    //         "birthday":"5-3",
    //         "detailList":"[ {'name':'小红','age':'4'}]"
    //     }
    // ]; 
    
    
    var arr = []; //存放新数组
    for (var i = 0; i < data.length; i++) {
        //读取每条数据的日期
        var resBirthday = data[i].birthday;
        
        //当日期相同,只要传这个
        var valDetailList = {
            "name": data[i].name,
            "age": data[i].age
        }
        
        //当日期没有相同的,就新建一个Item
        var valItem = { 
            "birthday": '',
            "detailList": []
        }
        valItem.birthday = resBirthday;
        valItem.detailList.push(valDetailList);
        
        //第0个不需要比较
        if (i == 0) {
            arr.push(valItem);
        } 
        //第1个就要开始找新数组arr相同的日期
        else{
            for (var k = 0; k < arr.length; k++) {
                if (resBirthday == arr[k].birthday) {
                    arr[k].detailList.push(valDetailList);
                } 
                else{
                    arr.push(valItem);
                }
            }
        }
    }
    console.log(arr);`

Answer 1

下面这段代码修改如下：

//第1个就要开始找新数组arr相同的日期
else{
    var index = -1; // 通过for循环查找index
    for (var k = 0; k < arr.length; k++) {
        if (resBirthday == arr[k].birthday) {
            index = k;
            break;   
        }
    }
    if (index === -1) { // 没有找到
        arr.push(valItem);
    } else { // 找到了
        arr[k].detailList.push(valDetailList);
    }
}

Answer 2

可以看一下吾辈实现的通用 groupBy

具体代码

import { groupBy } from 'rx-util'

var data = [
  { name: '小明', age: '4', birthday: '5-1' },
  { name: '小黄', age: '4', birthday: '5-1' },
  { name: '小红', age: '4', birthday: '5-3' },
]

console.log(groupBy(data, ({ birthday }) => birthday))

结果

Map { '5-1' => [ { name: '小明', age: '4', birthday: '5-1' }, 
  { name: '小黄', age: '4', birthday: '5-1' } ], 
  '5-3' => [ { name: '小红', age: '4', birthday: '5-3' } ] } 

当然，吾辈在这里更喜欢用 Map，但如果你想使用数组的话也可以简单的进行转换

const arr = Array.from(map).map(([birthday, detailList]) => ({ birthday, detailList }))
console.log(arr)

然后，你得到的你想要的

[ { birthday: '5-1', detailList: [ [Object], [Object] ] }, 
  { birthday: '5-3', detailList: [ [Object] ] } ] 

Answer 3

let obj = {};
data.map((item,index) => {
    if(obj[item.birthday] === undefined){
        obj[item.birthday] = {detailList: [{...item, birthday: undefined}]};
    }else{
        obj[item.birthday].detailList.push({...item, birthday: undefined});
    }
})
// 其实这个obj已经可以使用了，不需要转成数组
// 下面是obj转数组的代码
let newArr = [];
for(let o in obj){
    newArr.push({birthday: o, detailList:obj[o].detailList})
}
//如果需要对数组排序
newArr.sort(function(a,b){
    return a.birthday > b.birthday;
});

没跑过，可能会有些微语法错误。

Answer 4

其实你稍微修改一下处理的结构，就很好处理啦

let NewObj={};
data.map( (i,index) => {
   if( NewObj[ i.birthday ] === undefined ){
      NewObj[ i.birthday ] = {detailList: [] };
   }
   (NewObj[ i.birthday ]).detailList.push( {...i, birthday: undefined} );
})

这样将获得一个如下结构的对象：

{
   "5-1":{"detailList":"[ {'name':'小明','age':'4'} , {'name':'小黄','age':'4'}]"},
   "5-3":{"detailList":"[ {'name':'小红','age':'4'}]"}
}