【算法】在vue3的ts代码中分组group聚合源数据列表

2023-08-23 10:02 由 lanedm 发表于 #前端开发

有一个IList<any>()对象列表，

示例数据为[{id:'1',fieldName:'field1',value:'1'},{id:'1',fieldName:'field2',value:'2'},{id:'2',fieldName:'field1',value:'1'},{id:'2',fieldName:'field2',value:'2'}]

那么在ts中将它们根据id分组构建为两个dynamicObject，类推，如果id有n个，那需要自动构建n个dynamicObject。

算法实现：

 1 const list: IList<any> = [  
 2   { id: '1', fieldName: 'field1', value: '1' },  
 3   { id: '1', fieldName: 'field2', value: '2' },  
 4   { id: '2', fieldName: 'field1', value: '1' },  
 5   { id: '2', fieldName: 'field2', value: '2' }  
 6 ];  
 7   
 8 const map = new Map<string, any>();  
 9   
10 for (const item of list) {  
11   if (!map.has(item.id)) {  
12     const newObj = {};
13     newObj['id'] = item.id;
14     map.set(item.id, newObj);  
15   }  
16   const obj = map.get(item.id);  
17   obj[item.fieldName] = item.value;  
18 }  
19   
20 console.log(map);
21 
22 //将map转化为数组，可以进行for或forEach循环
23 const arrList = [...map];
24 
25 console.log(arrList);
26 //arrayList产生2条数据：{id:'1',field1:'1',field2:'2'},{id:'2',field1:'1',field2:'2'}
27  arrList.forEach((item: any) => {
28          //item[0]的值为1，即map的key
29         //item[1]的值为{id:'1',field1:'1',field2:'2'}
30         //continue类推
31    });

在以上的TS代码中，我们通过使用map函数对一个包含多个对象的数组进行了聚合操作。这些对象具有相同的id属性，我们根据这个属性将它们进行分组。

首先，我们创建了一个空对象result，用于存储聚合后的结果。然后，我们使用Array.prototype.map()函数对原始数组进行迭代。在每次迭代中，我们取出当前对象，通过map()函数将其转换为一个新的对象。

在转换过程中，我们使用了Object.assign()函数来复制当前对象的内容，并添加一个新的属性fields。这个属性的值是一个空对象{}，它将用于存储与当前对象具有相同id属性的其他对象。

接下来，我们再次使用map()函数对原始数组进行迭代，但这次我们只关注具有与当前对象相同id属性的对象。我们将这些对象赋值给一个新对象obj，并使用Object.assign()函数将其添加到之前创建的fields对象中。

最后，我们将包含所有聚合对象的result数组输出到控制台。

通过这个聚合操作，我们可以将具有相同id属性的对象合并在一起，形成一个包含多个字段的对象。这样的操作在处理大量数据时非常有用，可以减少重复数据，提高数据处理效率。