我正在创建一个ReactJS应用程序。该应用程序在屏幕上有超过100,000个实体，我正在使用WebGL进行绘制。这些实体的属性存储在JSON / Dict类型对象中。每当用户应用过滤器时，我都需要遍历值，比较属性并选择与过滤器不匹配的ID（类型UUID4），以便在WebGL容器中将其可见性设置为False。
我目前正在使用以下类型的数组：-
spriteProps = [{{id：xxxx -...- xxxx，color：Blue，长度：10，points：50}， {id：yyyy -...- yyyy，颜色：红色，长度：25，点数：112}， ..... ]
用户可能希望查看所有蓝色且长度小于100的实体。因此，我必须遍历每个值并检查哪些值与过滤器匹配。 但是，这非常慢。
在这种情况下，为了获得最佳性能，最好使用什么数据结构？有什么我可以用来提高性能的JS库吗？
谢谢。
https://www.ag-grid.com/react-getting-started/
Ag-grid是一个很好的库，可以帮助您实现所需的内容。 我将其用于对象数组的数据，数据集非常大。它应该完全适合您的需求。 排序和搜索可以无缝进行。您的属性将成为列标题，并且您可以基于列进行排序和过滤。选择行并固定特定行也是可能的。
,基本上，在这种情况下，您需要从大量数据中进行过滤。 交叉滤镜是非常好的选择。 Crossfilter是一个JavaScript库，用于在浏览器中浏览大型多元数据集。
https://github.com/crossfilter/crossfilter
,您可以尝试以下二进制搜索方法。
选择可能在过滤条件中使用的任何属性。我在这里选择length。当用户应用过滤器并且如果未将length用作过滤器时，则回退以简单地按顺序迭代数组。
如果有可用数据，请根据length属性以升序或降序对数组进行排序。
当用户应用过滤器时，执行binary search来查找所有元素在给定长度之内的上方或下方的索引。
迭代包含给定长度的元素的数组部分，并关闭具有不同color属性的元素的可见性。
然后在包含长度大于给定长度的元素的数组的其他部分上进行迭代，并关闭所有这些元素的可见性。
我们可以看到我们正在访问数组中的每个元素。因此，这种方法并不比顺序访问数组中的每个元素更好。
如果所有元素在开始时都关闭了可见性，并且我们必须为选定的元素打开可见性，那么我们可以避免访问数组的第二部分（第4点），这种二进制搜索方法将对这样的情况。
但是由于并非如此，我们必须访问数组中的每个元素，因此时间复杂度不会比线性时间O(n)更好。