Javascript 在浏览器中存储和搜索巨大的JSON/Dict类型对象时使用什么数据结构

我正在创建一个ReactJS应用程序。该应用程序在屏幕上有超过100000个实体，我正在使用WebGL绘制这些实体。这些实体的属性存储在JSON/Dict类型的对象中。每当用户应用过滤器时，我都需要遍历这些值，比较属性，并选择那些与过滤器不匹配的ID（类型UUID4），以便在WebGL容器中将它们的可见性设置为False

我目前正在使用以下类型的数组：-

spriteProps=[{id:xxxx-…-xxxx，颜色：蓝色，长度：10，点数：50}， {id:yyyy-…-yyy，颜色：红色，长度：25，点数：112}， ..... ]

用户可能希望看到所有蓝色且长度小于100的实体。因此，我必须遍历每个值，并检查哪些值与过滤器匹配。 然而，这是非常缓慢的

在这种情况下，要获得最佳性能，最好的数据结构是什么？是否有任何JS库可用于提高性能

谢谢。

Ag grid是一个很好的库，它将帮助您实现所需的功能。 我将其用于对象数组中的数据，数据集非常大。它应该完全符合你的需要。

---

排序和搜索可以无缝地工作。您的属性将是列标题，您可以根据列进行排序和筛选。也可以选择行并固定特定行

基本上，在这个用例中，您需要从大量数据中进行筛选。 交叉过滤器是非常好的选择。Crossfilter是一个JavaScript库，用于在浏览器中探索大型多元数据集

---

您可以尝试以下二进制搜索方法

选择可能在筛选条件中使用的任何属性。我在这里选择

length

。当用户应用过滤器时，如果

length

未用作过滤器，则返回到仅按顺序迭代数组

数据可用时，根据

length

属性按升序或降序对数组进行排序

当用户应用过滤器时，执行一次搜索以查找所有元素都在给定长度内的高于或低于该索引的索引

迭代包含给定长度内元素的数组部分，并关闭具有不同

color

属性的元素的可见性

然后迭代数组中包含大于给定长度的元素的其他部分，并关闭所有这些元素的可见性

我们可以看到，我们正在访问数组中的每个元素。因此，这种方法并不比按顺序访问数组中的每个元素更好

如果所有元素在开始时都关闭了可见性，并且如果我们必须打开选定元素的可见性，那么我们可以避免访问数组的第二部分（第4点），这种二进制搜索方法在这种情况下非常有用

---

但事实并非如此，我们必须访问数组中的每个元素，因此时间复杂度无法超过线性时间

O（n）

您有没有研究过像ag grid这样的第三方库？它提供了大量您希望实现的功能。我在前端使用ag grid进行过滤和排序。但是，我仍然需要在React应用程序中使用JS代码搜索数据，以显示/隐藏精灵。我在寻找最合适的ata结构。啊，我明白你的意思。但对于后端过滤，我认为最好编写自己的JS代码。您表示数据的方式似乎很好。JS数组和对象原型方法非常通用，您可以控制前端实际呈现的数据量。如果您确实想使用库，请查看apache提供的ArrowJs。我没有亲自使用过它，但希望它能有所帮助。是的，我可以使用香草JS代码。我想知道对于这个用例来说什么更好-数组、映射、对象等/ForEach等@user3367601-用于迭代数组和

if

条件以检查长度和颜色。关闭不满足条件的图元的可见性。有关更多信息，请参阅我的。在确定任何建议的库之前，请在您的数据上测试它，自己比较性能，然后做出决定。只有使用按长度筛选的方法，顺序才会起作用。在这种情况下，应该使用一个映射作为排序，并且必须手动进行排序。在大多数情况下，我们必须遍历整个结构进行过滤。所以不幸的是，没有任何数据结构可以大大降低时间复杂度。@SouritraDasGupta-是的，但如果不按长度过滤，我们可以退回到简单的顺序迭代。“地图”在这里不会提供任何额外的性能增益。数组保持插入顺序并可以就地排序，而映射保持插入顺序但不能就地排序-必须为其创建新映射。我们在这里比较的是数组和贴图，而不是对象和贴图。是的，这是我告诉他的。无法击败经典对象和数组。