前端如何统计后台返回数组中重复数据的次数？-html教程-PHP中文网

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

碧海醫心

发布： 2025-03-08 10:34:20

原创

625人浏览过

高效统计前端数组中重复数据：基于reduce方法的解决方案

本文介绍一种高效方法，用于统计后台返回数组中重复数据的次数，并避免因数据分批返回导致的计数错误。假设后台返回的数据包含重复的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 }
];

const countDuplicates = (data) => {
    return data.reduce((acc, curr) => {
        const existingItem = acc.find(item => item.NO === curr.NO);
        if (existingItem) {
            existingItem.count++;
        } else {
            acc.push({ ...curr, count: 1 });
        }
        return acc;
    }, []);
};

let newArr = countDuplicates(list);
console.log(newArr); // 输出包含count属性的去重数组

登录后复制

这段代码定义了一个countDuplicates函数，该函数使用reduce方法遍历数组。对于每个对象，它检查NO字段是否已存在于累加器数组中。如果存在，则增加计数；否则，将该对象及其计数（1）添加到累加器数组中。

改进：模拟后端分批返回数据

为了模拟后端分批返回数据的场景，我们可以添加一个定时器，模拟每隔一段时间返回一部分数据：

// ... (countDuplicates 函数同上) ...

function processData(newData) {
    newArr = countDuplicates([...newArr, ...newData]); // 合并新数据并重新统计
    console.log("Updated data:", newArr);
    // 在这里更新页面显示
}


// 模拟后端每3秒返回一条数据
setInterval(() => {
    const newData = [ /* 模拟从后端获取的新数据 */ ];
    processData(newData);
}, 3000);

登录后复制

这段代码模拟了后端每3秒返回一批数据的场景，processData 函数负责将新数据与已有的数据合并，并使用 countDuplicates 函数重新计算重复次数。实际应用中，需要将 /* 模拟从后端获取的新数据 */ 替换为实际的后端数据请求。

注意：此代码假设后端返回的数据格式与示例中的list数组一致。如果数据格式不同，需要根据实际情况修改代码。此外，页面更新部分需要根据实际前端框架进行调整。

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