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