前端统计后台数组重复数据次数技巧

本文介绍一种高效的前端方法，利用`reduce`函数统计后台返回数组中重复数据的次数，完美解决因数据分批返回导致的计数错误问题。 针对后台返回包含重复`NO`字段的数组，该方法能准确地进行去重并统计每个`NO`字段出现的次数。 文章提供详细代码示例，并模拟后端分批返回数据场景，确保在实际应用中也能准确计数，避免传统方法的重复计数错误。 同时，文章也指出了代码适用场景及潜在的修改需求，方便读者根据实际情况调整使用。

高效统计前端数组中重复数据：基于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数组一致。 如果数据格式不同，需要根据实际情况修改代码。 此外，页面更新部分需要根据实际前端框架进行调整。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。