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

算法,vue3,ts,代码,分组,group,聚合,数据,列表 · 浏览次数 : 44

小编点评

```typescript const list: 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' } ]; // 创建一个空对象来存储聚合后的结果 const map = new Map(); // 对数组进行遍历,并构建动态对象 for (const item of list) { if (!map.has(item.id)) { const newObj = {}; newObj['id'] = item.id; map.set(item.id, newObj); } const obj = map.get(item.id); obj[item.fieldName] = item.value; } // 将map转化为数组,可以进行for或forEach循环 const arrList = [...map]; // 打印聚合后的结果 console.log(arrList); ``` **输出结果:** ``` [ { id: "1", fieldName: "field1", value: "1" }, { id: "2", fieldName: "field1", value: "1" }, { id: "2", fieldName: "field2", value: "2" } ] ``` **算法说明:** 1. 创建一个空对象 `map` 来存储所有合并后的结果。 2. 对数组进行遍历,并使用 `map()` 函数构建动态对象,并将它们存储在 `map` 中。 3. 将 `map` 转化为数组,并进行 `for` 或 `forEach()` 循环进行处理。 4. 在每次迭代中,我们使用 `Object.assign()` 函数复制当前对象的内容,并添加一个新的属性 `fields`,用于存储与当前对象具有相同id属性的其他对象。 5. 最后,我们将包含所有合并对象的 `result` 数组输出到控制台。

正文

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

与【算法】在vue3的ts代码中分组group聚合源数据列表相似的内容:

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

有一个IList()对象列表, 示例数据为[{id:'1',fieldName:'field1',value:'1'},{id:'1',fieldName:'field2',value:'2'},{id:'2',fieldName:'field1',value:'1'},{id:'2',f

【算法】在各种排列组合下,计算零钱找零方式数量

写一个函数,在给定一系列硬币面额的情况下,计算你可以用多少种不同的方式来兑换一笔钱。 例如,如果你有面额为1和2的硬币,有3种方法可以为4找零: 1+1+1+1,1+1+2,2+2。 硬币的顺序无关紧要: 1+1+2==2+1+1 此外,假设你有无限数量的硬币。 示例调用,一个金额和一系列独特面额的

一个开源且全面的C#算法实战教程

前言 算法在计算机科学和程序设计中扮演着至关重要的角色,如在解决问题、优化效率、决策优化、实现计算机程序、提高可靠性以及促进科学融合等方面具有广泛而深远的影响。今天大姚给大家分享一个开源、免费、全面的C#算法实战教程:TheAlgorithms/C-Sharp。 C#经典十大排序算法(完结) 支持C

MD5算法

# MD5算法 在我们进行js逆向的时候. 总会遇见一些我们人类无法直接能理解的东西出现. 此时你看到的大多数是被加密过的密文. MD5是一个非常常见的摘要(hash)逻辑. 其特点就是小巧. 速度快. 极难被破解. 所以, md5依然是国内非常多的互联网公司选择的密码摘要算法. 1. 这玩意不可逆

推荐算法在商城系统实践

一、简介 本文博主给大家讲解如何在自己开源的电商项目newbee-mall-pro中应用协同过滤算法来达到给用户更好的购物体验效果。 newbee-mall-pro项目地址: 源码地址:https://github.com/wayn111/newbee-mall-pro 在线地址:http://12

再谈vue中的differ算法

Differ算法 在 Vue 中,当数据变化时,Vue 会使用 Virtual DOM 和 diff 算法来尽可能地减少 DOM 操作的次数,以提高性能。 diff 算法是 Virtual DOM 实现中的核心算法之一,其主要作用是比较新旧虚拟 DOM 树的差异,并将差异应用到真实的 DOM 树上。

在代码世界游走,没几把“锁”防身可不行

锁共有多种算法,在并发场景中都是被常常用到,想必大家都已炉火纯青般.....巴特!我们还有后浪同学们可能不熟悉,那我在这里聊下锁的用法和使用场景。

一文教你在MindSpore中实现A2C算法训练

文中的配置定义了 Actor-Critic 算法在 MindSpore 框架中的具体实现,包括 Actor 和 Learner 的设置、策略和网络的参数,以及训练和评估环境的配置。

[转帖]关于一致性哈希算法在游戏服务器端的思考

https://www.jianshu.com/p/b8ae27cf22a9 突然想明白 其实网易的将军令 就是一个一致性哈希的玩法 关于一致性哈希算法在游戏服务器端的思考 需求分析 后端有很多逻辑node节点(not-section binded),节点启动后注册到注册中心 node本身有状态,有

Java中CAS算法的集中体现:Atomic原子类库,你了解吗?

一、写在开头 在前面的博文中我们学习了volatile关键字,知道了它可以保证有序性和可见性,但无法保障原子性,结局原子性问题推荐使用synchronized、Lock或者AtomicInteger;我们还学习过CAS算法,在那篇博文中我们同样也提及atomic。那么今天,我们就来好好学一学Atom