JS 对象数组根据指定属性名group by分组

参考资料:

  1. https://blog.csdn.net/mafan121/article/details/83418116
  2. https://www.30secondsofcode.org/js/s/group-by


一. 分组方法1

  • 可根据匿名函数者属性名来分组
const groupByMethod1 = (arr, fnOrProperty) => {
    return arr.map(typeof fnOrProperty === 'function' ? fnOrProperty : val => val[fnOrProperty])
              .reduce((acc, val, i) => {
                acc[val] = (acc[val] || []).concat(arr[i]);
                return acc;
              }, {});
}

二. 分组方法2

  • 可根据匿名函数来分组
const groupByMethod2 = (list, fn) => {
    const groups = {};
    list.forEach(function (o) {
        const group = JSON.stringify(fn(o));
        groups[group] = groups[group] || [];
        groups[group].push(o);
    });
    return groups;
}

三. 效果

  • 数据准备
    const studentList = [
        {
            class: '1班',
            name: '张三',
            sex: '男'
        },
        {
            class: '2班',
            name: '李四',
            sex: '男'
        },
        {
            class: '1班',
            name: '王五',
            sex: '女'
        },
        {
            class: '3班',
            name: '赵六',
            sex: '男'
        }
    ];
    
  • 效果
    // ⏹通过属性的方式,按照班级来分组
    const group1 = groupByMethod1(studentList, 'class');
    console.log(group1);
    /*
        {
            '1班': [
                {class: "1班", name: "张三", sex: "男"},
                {class: "1班", name: "王五", sex: "女"}
            ],
            '2班': [
                {class: "2班", name: "李四", sex: "男"}
            ],
            '3班': [
                {class: "3班", name: "赵六", sex: "男"}
            ],
        }
    */
    
    // ⏹通过匿名函数的方式1,按照性别来分组
    const group2 = groupByMethod1(studentList, (item) => item.sex);
    console.log(group2);
    /*
        {
            女: [
                {class: "1班", name: "王五", sex: "女"}
            ],
            男: [
                {class: "1班", name: "张三", sex: "男"},
                {class: "2班", name: "李四", sex: "男"},
                {class: "3班", name: "赵六", sex: "男"}
            ],
        }
    */
    console.log(group2['男']);
    /*
        [
            {class: "1班", name: "张三", sex: "男"},
            {class: "2班", name: "李四", sex: "男"},
            {class: "3班", name: "赵六", sex: "男"}
        ]
    */
    
    // ⏹通过匿名函数的方式2,按照性别来分组
    const group3 = groupByMethod2(studentList, (item) => item.sex);
    console.log(group3);
    /*
        {
            "女": [
                {class: "1班", name: "王五", sex: "女"}
            ],
            "男": [
                {class: "1班", name: "张三", sex: "男"},
                {class: "2班", name: "李四", sex: "男"},
                {class: "3班", name: "赵六", sex: "男"}
            ],
        }
    */
    
    // 通过这种方式的key来获取的时候,必须多套一层 ''
    console.log(group3['"男"']);
    /*
        [
            {class: "1班", name: "张三", sex: "男"},
            {class: "2班", name: "李四", sex: "男"},
            {class: "3班", name: "赵六", sex: "男"}
        ]
    */
    
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我理解您的意思了。基于您的需求,我写了以下的 JavaScript 函数来实现: ```javascript function groupBy(arr, field) { const groups = {}; arr.forEach(item => { const groupValue = item[field]; if (!groups[groupValue]) { groups[groupValue] = { [field]: groupValue, children: [] }; } groups[groupValue].children.push(item); }); return Object.values(groups); } ``` 这个函数接受两个参数:一个对象数组 `arr`,和一个字符串 `field`,表示按照哪个字段进行分组。函数内部使用了一个对象 `groups` 来存储分组结果,然后遍历对象数组,对每个对象进行分组,并将分组结果存储到 `groups` 对象中。最后,我们将 `groups` 对象中的值转换成数组形式,并返回即可。 例如,如果我们有以下的对象数组: ```javascript const arr = [ { name: 'Alice', age: 23, gender: 'female' }, { name: 'Bob', age: 25, gender: 'male' }, { name: 'Charlie', age: 22, gender: 'male' }, { name: 'David', age: 24, gender: 'male' }, { name: 'Eve', age: 21, gender: 'female' }, { name: 'Frank', age: 26, gender: 'male' }, { name: 'Grace', age: 20, gender: 'female' }, { name: 'Henry', age: 27, gender: 'male' }, ]; ``` 我们可以使用 `groupBy` 函数按照 `gender` 字段进行分组: ```javascript const result = groupBy(arr, 'gender'); console.log(result); ``` 这个函数会返回以下结果: ```javascript [ { gender: 'female', children: [ { name: 'Alice', age: 23, gender: 'female' }, { name: 'Eve', age: 21, gender: 'female' }, { name: 'Grace', age: 20, gender: 'female' } ] }, { gender: 'male', children: [ { name: 'Bob', age: 25, gender: 'male' }, { name: 'Charlie', age: 22, gender: 'male' }, { name: 'David', age: 24, gender: 'male' }, { name: 'Frank', age: 26, gender: 'male' }, { name: 'Henry', age: 27, gender: 'male' } ] } ] ``` 在这个结果中,我们可以看到,原始的对象数组已经被按照 `gender` 字段分成了两组,并且每组的结果都被塞到了 `children` 字段中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值