【演算法】在vue3的ts代碼中分組group聚合源數據列表

有一個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屬性的對象合併在一起，形成一個包含多個欄位的對象。這樣的操作在處理大量數據時非常有用，可以減少重覆數據，提高數據處理效率。