如何高效处理后台返回的重复数组数据并统计重复次数？本文提供一种基于javascript的解决方案，有效解决前端统计重复数据的问题，避免原代码中重复计数的错误。
假设后台返回一个包含多个对象的数组，每个对象具有多个字段（例如：DF、Fstep、NO）。我们需要根据NO字段识别重复项，并在最终渲染的数据中添加一个“重复次数”字段。
原始代码的问题在于，每次获取新的后台数据，所有数据的“探测次数”字段都会改变。为了解决这个问题，我们采用reduce方法进行高效统计。
以下代码演示了如何使用reduce方法统计重复数据：
let list = [ { DF: 343, Fstep: 0.2, NO: 1004 }, { DF: 344, Fstep: 0.2, NO: 1005 }, { DF: 345, Fstep: 0.2, NO: 1004 }, { DF: 346, Fstep: 0.2, NO: 1004 }, { DF: 347, Fstep: 0.2, NO: 1006 }, { DF: 348, Fstep: 0.2, NO: 1005 }];let newArr = [];let list1 = [];let i = 0;let timer = setInterval(() => { if (i === list.length) { clearInterval(timer); return; } // 模拟每3秒后端返回一条数据 list1 = [list[i]]; i++; fn(list1);}, 3000);function fn(arr) { newArr = arr.reduce((s, v) => { let index = s.findIndex(it => it.NO === v.NO); if (index !== -1) { s[index] = { ...v, startTime: s[index].startTime, endTime: getNowDate(), count: ++s[index].count }; } else { s.push({ ...v, count: 1, startTime: getNowDate(), endTime: getNowDate() }); } return s; }, newArr); console.log(newArr);}// 格式化日期对象const getNowDate = () => { const date = new Date(); // ... (日期格式化代码，与原文相同) ...};
这段代码利用reduce方法迭代数组，根据NO字段判断重复，并更新count字段记录重复次数。getNowDate函数格式化日期时间，添加到每个对象中。setInterval模拟后端分批返回数据。 该方法假设每次后端返回的数据量较小，大数据量场景需要考虑优化策略。 此方法有效避免了原始代码中每次获取数据都导致所有数据“探测次数”字段变化的问题，确保了计数的准确性。
立即学习“前端免费学习笔记（深入）”；
以上就是前端如何高效统计后台返回数组中重复数据的次数？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1563898.html
微信扫一扫 
支付宝扫一扫 
