前端高效处理后台返回数组的重复数据统计
本文介绍如何高效处理后台返回的包含重复数据的数组，并根据指定字段（例如“NO”字段）统计重复项的次数，最终在前端页面展示每个项目的重复次数。
问题：开发者收到包含“NO”字段的数组数据，需要根据“NO”字段的值判断重复项，并添加“重复次数”字段显示每个“NO”值出现的次数。原代码在处理重复数据时，每次获取新数据都会导致所有项目的“探测次数”字段变化，这不是预期结果。
解决方案：使用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 data = []; // 使用data代替newArr，更清晰let timer = setInterval(() => { // 模拟后端每3秒返回一条数据 let newData = list.shift(); // 使用shift从list数组中取出一条数据 if (!newData) { clearInterval(timer); return; } updateData(newData);}, 3000);function updateData(newItem) { data = data.reduce((acc, item) => { if (item.NO === newItem.NO) { // 找到重复项，更新计数 return [...acc.slice(0, acc.indexOf(item)), { ...item, count: item.count + 1 }, ...acc.slice(acc.indexOf(item) + 1)]; } else { // 没有重复项，添加到数组 return [...acc, item]; } }, data); if (data.findIndex(item => item.NO === newItem.NO) === -1) { data.push({...newItem, count: 1}); } console.log(data);}
这段代码使用reduce方法迭代数组，根据NO字段判断重复项。找到重复项则更新count字段；否则添加新项，并将count设置为1。 setInterval模拟后端每3秒返回一条数据。 与原代码相比，此代码更简洁高效，避免了不必要的重新计算。 shift()方法从数组头部移除元素，模拟数据流。 此方案假设数据顺序无关紧要，如果顺序影响结果，需要调整代码逻辑。 使用data代替newArr，使代码更易理解。
立即学习“前端免费学习笔记（深入）”；
此方法有效解决了原问题中重复计数的问题，确保每个NO值的计数只在发现重复时更新，避免了所有项计数都变化的情况。
以上就是前端如何高效统计后台返回数组中重复数据项的次数？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1563778.html
微信扫一扫 
支付宝扫一扫 
