前端如何高效处理后台返回的重复数组数据并显示重复次数？-html教程-PHP中文网

前端如何高效处理后台返回的重复数组数据并显示重复次数？

花韻仙語

发布： 2025-03-15 09:56:11

原创

602人浏览过

前端如何高效处理后台返回的重复数组数据并显示重复次数？

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

假设后台返回一个包含重复对象的数组，每个对象都有一个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函数，因为它与核心逻辑无关。这个方法有效地避免了每次都重新计算所有数据的重复次数，提高了效率。

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