reduce分组

web_zch

已于 2024-08-23 10:51:32 修改

阅读量109

点赞数 2

文章标签：前端 javascript vue.js

于 2024-08-23 10:16:29 首次发布

本文链接：https://blog.csdn.net/web_zch/article/details/141458942

版权

第一种方式

const formartData = () => {
            console.log('0kkkkkk')
            const data = [
                { name: 'Alice', age: 25 },
                { name: 'Bob', age: 30 },
                { name: 'Alice', age: 28 },
                { name: 'Charlie', age: 22 },
                { name: 'Bob', age: 35 },
            ];
            let newData = data.reduce((acc, item) => {
                if (!acc[item.name]) {
                    acc[item.name] = [];
                }
                acc[item.name].push(item);
                return acc;
            }, {});
            let newArr = Object.keys(newData).map(name => {
                return {
                    name: name,
                    list: newData[name]
                };
            });
            console.log('newArr -----',newArr);
            // 最终的newArr数据结构是
            // [
            //     {name: 'Alice',list: [{ name: 'Alice', age: 25 },{ name: 'Alice', age: 28 }]},
            //     {name: 'Bob',list: [{ name: 'Bob', age: 30 }, { name: 'Bob', age: 35 }]},
            //     {name: 'Charlie',list: [{ name: 'Charlie', age: 22 }]}
            // ]
        }

第二种方式(引入lodash)

import lodash from 'lodash';

const formartTable= () => {
            console.log('0kkkkkk')
            const data = [
                { name: 'Alice', age: 25 },
                { name: 'Bob', age: 30 },
                { name: 'Alice', age: 28 },
                { name: 'Charlie', age: 22 },
                { name: 'Bob', age: 35 },
            ];
            let newData = lodash.groupBy(data, 'name')
            console.log('newData2 -----',newData);
            let newArr = Object.keys(newData).map(name => {
                return {
                    name: name,
                    list: newData[name]
                };
            });
            console.log('newArr -----',newArr);
            // 最终的newArr数据结构是
            // [
            //     {name: 'Alice',list: [{ name: 'Alice', age: 25 },{ name: 'Alice', age: 28 }]},
            //     {name: 'Bob',list: [{ name: 'Bob', age: 30 }, { name: 'Bob', age: 35 }]},
            //     {name: 'Charlie',list: [{ name: 'Charlie', age: 22 }]}
            // ]
        }

最后如果要合并表格可以加上这么一段代码:

 let arr = []
            newArr.forEach((e,index) => {
                if (e.list && e.list.length) {
                    e.list.forEach((i, indexTwo) => {
                        if (indexTwo == 0) {
                            arr.push({...i, rowspan: e.list.length})
                        } else {
                            arr.push({...i})
                        }
                    })
                }
            })
  // arr = [
            //     { name: 'Alice', age: 25,rowspan:2 },
            //     { name: 'Alice', age: 28 },
            //     { name: 'Bob', age: 30,rowspan:2 },
            //     { name: 'Bob', age: 35 },
            //     { name: 'Charlie', age: 22,rowspan:1 },
            // ];