登录
首页 >  文章 >  前端

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

时间: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学习网公众号!

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>