时间戳

首页 > 解决方案 > 在 Javascript 中处理大型数组的最佳方法是什么？

javascript - 在 Javascript 中处理大型数组的最佳方法是什么？

问题描述

我有一个 React JS 应用程序，它使用 API 来提取一个 JSON 对象，其中包含 10,000 多个对象的数组。然后，该数组用于填充表格，其中包含某些过滤器和复选框、下拉列表中的选项，可以操纵数据。当点击复选框时，在数组上使用过滤器、排序和归约函数来返回可以再次填充表的数组的特定子集。

有 10-15 个选项可供选择，因此每次选中一个框时都会对数据运行 10-15 个过滤器/映射/减少函数。

这些过滤选项现在会在单击复选框和更改表格之间造成明显的延迟。应用程序在计算新数组时冻结。是否有更有效的流程来过滤我的数据？

下面的一些示例函数：

//gameData is an array of 10k+ objects
let inData = gameData

const options = {
    dateToTime: new Date('2020-03-01'),
    servers:[1,2,3],
    maps:['A','B','C']
}

function groupByArray(array, key) {
    return array.reduce(function (rv, x) {
        let v = key instanceof Function ? key(x) : x[key];
        let el = rv.find((r) => r && r.key === v);
        if (el) {
            el.values.push(x);
        } else {
            rv.push({ key: v, values: [x] });
        } return rv;
    }, []);
}

const gamesGrouped = groupByArray(inData, 'gameid')
inData = gamesGrouped.filter(a => a.playername != "new")
inData = inData.filter(game => {
    const thisTime = new Date(game.creationtime)
    return (thisTime < options.dateToTime)
})
inData = inData.filter(game => options.servers.includes(game.serverip))
inData.filter(game => options.maps.includes(game.map))

提前致谢！

标签： javascriptarraysreactjs

解决方案

我想说不可能给出如何处理数组数据的一般答案，但我可以给出一些指示。

  • 嵌套循环时要小心（避免重复相同的迭代）
  • 避免间接费用，例如。find() 可以替换为更快的 for 循环（我知道 find() 更容易编写，但是通过将其切换到 for 循环，您可以看到大约 30% 的性能提升）
  • 分页 - 您可以使用生成器分块处理数组（例如，如果您只需要显示前 10 个结果，那么处理所有结果会更快）

您提供的代码也有点神秘，您可能希望使用更好的命名。

这是groupByArray() 函数的性能比较：https ://jsbench.me/t7kltjm1sy/1

值得注意的是，每当我处理对性能敏感的情况时，我都会将代码尽可能靠近 VanillaJS，因为对于大型数据集，即使是很小的函数开销也会很明显。

推荐阅读