高效处理后台返回的重复数组数据并显示重复次数，是前端开发中常见的问题。本文提供一种解决方案，避免因重复数据导致的“探测次数”字段错误更新。

假设后台返回一个包含重复对象的数组，每个对象都有一个NO字段用于标识。我们需要统计每个NO对应的重复次数，并将其显示在前端。

问题： 直接处理重复数据会导致每次获取新数据时，所有数据的计数都需要重新计算，效率低下且容易出错。

解决方案： 使用JavaScript的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 }
];

接下来，使用reduce方法对数组进行处理，统计每个NO的出现次数，并添加count字段记录次数：

let newArr = [];
let list1 = [];
let i = 0;

let timer = setInterval(() => {
    if (i === list.length) {
        clearInterval(timer);
        return;
    }
    // 模拟每3秒后台返回一条数据
    list1 = [list[i]];
    i++;
    fn(list1);
}, 3000);

function fn(arr) {
    newArr = arr.reduce((s, v) => {
        let index = s.findIndex(it => it.NO === v.NO);
        if (index !== -1) {
            s[index] = { ...v, count: ++s[index].count };
        } else {
            s.push({ ...v, count: 1 });
        }
        return s;
    }, newArr);
    console.log(newArr);
}

这段代码模拟了后台分批返回数据的情况。fn函数使用reduce方法对每次返回的数据进行处理。如果NO已存在于newArr中，则增加其count值；否则，添加该对象到newArr中，并设置count为1。 这确保了只有新数据被处理，避免了重复计算。

最终，newArr数组包含所有数据，每个对象都包含一个count字段，表示该对象的重复次数。前端可以使用newArr渲染页面，准确显示每个数据的重复次数。 代码中省略了getNowDate函数，因为它与核心逻辑无关。 这个方法有效地避免了每次都重新计算所有数据的重复次数，提高了效率。