Какую структуру данных использовать для хранения и поиска в огромном объекте типа JSON / Dict в браузере

Question

Я создаю приложение ReactJS. Приложение имеет более 100 000 объектов на экране, которые я планирую с помощью WebGL. Свойства этих объектов хранятся в объекте типа JSON / Dict. Всякий раз, когда пользователь применяет фильтр, мне нужно просмотреть значения, сравнить свойства и выбрать идентификатор (тип UUID4) для тех, которые не соответствуют фильтру, чтобы я мог включить их Видимость в Ложь в контейнере WebGL.

В настоящее время я использую массив следующего типа: -

spriteProps = [{id: xxxx -...- xxxx, цвет: синий, длина: 10, точки: 50}, {id: yyyy -...- гггг, цвет: красный, длина: 25, точки: 112}, .....]

Пользователь может захотеть увидеть все объекты, имеющие синий цвети имеют длину менее 100. Поэтому я должен перебрать каждое значение и проверить, какие значения соответствуют фильтру. Однако это очень медленно.

Какую структуру данных лучше использовать в этой ситуации для достижения максимальной производительности? Есть ли какая-нибудь библиотека JS, которую я могу использовать для повышения производительности?

Спасибо.

Answer 1

В основном в этом случае вам необходимо отфильтровать большой набор данных. Поперечный фильтр - очень хороший вариант. Crossfilter - это библиотека JavaScript для исследования больших многомерных наборов данных в браузере.

https://github.com/crossfilter/crossfilter

Answer 2

Вы можете попробовать следующий подход двоичного поиска.

Выберите любое свойство, которое, вероятно, будет использоваться в критериях фильтрации. Я выбираю length здесь. Когда пользователь применяет фильтры и если length не используется в качестве фильтра, тогда отступают к простой итерации массива в последовательности.

1. Когда данные доступны, сортируйте массив по возрастанию илив порядке убывания на основе свойства length.

2. Когда пользователь применяет фильтры, выполните бинарный поиск , чтобы найти индекс выше или ниже всех элементов в пределах заданногодлина.

3. Выполните итерацию в разделе массива, содержащего элементы в пределах заданной длины, и отключите видимость для элементов с другим свойством color.

4. Затем выполните итерацию в другом разделе массива, содержащем элементы больше заданной длины, и отключите видимость для всех этих элементов.

Мы можем видеть, что мы посещаем каждый элемент в массиве. Таким образом, этот подход ничуть не лучше, чем последовательное посещение каждого элемента в массиве.

Если у всех элементов вначале отключена видимость и если нам нужно включить видимость для выбранных элементов, тогда мы можем избежатьпосещение второго раздела массива (пункт 4), и этот подход двоичного поиска будет полезен в таком случае.

Но поскольку это не так, мы должны посетить каждый элемент в массиве, и поэтому сложность времени не может быть лучше, чем линейное время O(n).

Answer 3

https://www.ag -grid.com / Reaction-Getting-Start /

Ag-grid это хорошая библиотека, которая поможет вам реализовать то, что вы ищете. Я использовал его с данными, которые представляли собой массив объектов, и набор данных был очень большим. Это должно соответствовать вашим потребностям идеально. Сортировка и поиск работает без проблем. Ваши свойства будут заголовками столбцов, и вы можете сортировать и фильтровать по столбцам. Выбор строк и закрепление определенных строк также возможно.