reduce分组

第一种方式

 /**
 * 实现分组的工具函数
 * @param array 传入的数组
 * @param key   根据相同的key分组
 */
  const groupBy = (array, key)=> {
       return array.reduce((result, item) => {
		(result[item[key]] = result[item[key]] || []).push(item);
		    return result;
       }, {});
   }
   const arr = [
      { name: 'Apple', category: 'Fruit' },
      { name: 'Carrot', category: 'Vegetable' },
      { name: 'Banana', category: 'Fruit' }
   ];
   let newArr = groupBy(arr, 'category')//先分组
   let newArr2 = Object.values(newArr)
    // newArr2实际得到
    // [
    //     [
    //         { name: 'Apple', category: 'Fruit' },
    //         { name: 'Banana', category: 'Fruit' }
    //     ],
    //     [
    //         { name: 'Carrot', category: 'Vegetable' }
    //     ]
    // ]

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 },
            // ];