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