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
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值