前端高效处理后台返回数组的重复数据统计

本文介绍如何高效处理后台返回的包含重复数据的数组，并根据指定字段（例如“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值的计数只在发现重复时更新，避免了所有项计数都变化的情况。