前端如何高效统计后台返回数组中重复数据的次数?

聖光之護
发布: 2025-03-16 08:32:01
原创
873人浏览过

前端如何高效统计后台返回数组中重复数据的次数?

如何高效处理后台返回的重复数组数据并统计重复次数?本文提供一种基于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模拟后端分批返回数据。 该方法假设每次后端返回的数据量较小,大数据量场景需要考虑优化策略。 此方法有效避免了原始代码中每次获取数据都导致所有数据“探测次数”字段变化的问题,确保了计数的准确性。

立即学习前端免费学习笔记(深入)”;

以上就是前端如何高效统计后台返回数组中重复数据的次数?的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号