前端如何高效统计后台返回数组中重复数据项的次数?
时间:2025-03-14 11:30:11 483浏览 收藏
本文介绍前端高效统计后台返回数组中重复数据项次数的方法。 面对包含重复“NO”字段的数组数据,传统方法效率低下且存在重复计数问题。本文提供了一种基于`reduce`方法的解决方案,通过迭代数组并根据“NO”字段判断重复项,精准统计每个项目的重复次数,最终在页面展示结果。该方法避免了不必要的重复计算,提高了效率,并解决了原代码中所有项目计数都变化的问题,适用于实时更新数据场景。 关键词:前端统计,数组去重,reduce方法,重复数据计数,高效算法。
前端高效处理后台返回数组的重复数据统计
本文介绍如何高效处理后台返回的包含重复数据的数组,并根据指定字段(例如“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
值的计数只在发现重复时更新,避免了所有项计数都变化的情况。
本篇关于《前端如何高效统计后台返回数组中重复数据项的次数?》的介绍就到此结束啦,但是学无止境,想要了解学习更多关于文章的相关知识,请关注golang学习网公众号!
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
423 收藏
-
228 收藏
-
243 收藏
-
256 收藏
-
309 收藏
-
372 收藏
-
289 收藏
-
300 收藏
-
171 收藏
-
230 收藏
-
477 收藏
-
183 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 508次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 497次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 484次学习