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

发布时间 2023-08-23 10:08:19作者: 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属性的对象合并在一起,形成一个包含多个字段的对象。这样的操作在处理大量数据时非常有用,可以减少重复数据,提高数据处理效率。