Как создать собственный метод цепного фильтра с новой функцией

Ситуация

У меня есть таблица, и для каждого столбца пользователь может установить несколько фильтров, например:

ID is greater then 10 && lower then 40 && is equal to 22

Данные

Я передаю примененные фильтры с правильным оператором и значением проверки, например:

const filters = [
  {
    value: 10,
    operator: '<'
  },
  {
    value: 40,
    operator: '>'
  },
  {
    value: 22,
    operator: '=='
  },
]

Данные одного столбца могут выглядеть так:

const columnData = [10,22,3,1,14,15,69,22,...]

Проект

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

Я подумал, что с new Function-методом это будет идеальный вариант использования цепочки фильтров, например:

colData < 10 && colData > 40 && colData == 22

Цель

const colVal = 22
const testFn = new Function('colData',
'return colData > 10 && colData < 40 && colData == 22' // <- should be a custom string
)
console.info(testFn(colVal)) // true;

Теперь я застрял, чтобы создать пользовательскую строку, которая представляет мои фильтры.

Я подумал, что могу сначала создать строку, использовать ее в testFn-методе и плавно сравнить каждое значение.

Я пробовал следующее:

const colVal = 22
const y = (colData) => `${colData}` + ' > 10 && ' + `${colData}` + ' < 40 && ' + `${colData}` + ' == 22'
const testFn = new Function('y', 'colVal',
'return y(colVal)'
)
console.info(testFn(y, colVal )); // 22 > 10 && 22 < 40 && 22 == 22

У вас есть идея внедрить пользовательскую строку в метод new Function?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
20
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете создать строку условного фильтра на основе массива фильтров, используя методы map и join, а затем передать эту строку в основную строку тела функции конструктору Function.

const filters = [{
    value: 10,
    operator: '>'
  },
  {
    value: 40,
    operator: '<'
  },
  {
    value: 22,
    operator: '=='
  },
]

const columnData = [10, 22, 3, 1, 14, 15, 69, 22]

const filterString = filters.map(({ value, operator }, i) => `el ${operator} ${value}`).join(' && ')
const fnString = `return data.filter(el => ${filterString})`
const fn = new Function('data', 'filters', fnString)

console.info(fnString)
console.info(fn(columnData, filters))

Спасибо, выглядит так, как я хотел! Позвольте мне обдумать то, что мне не хватало.

wittgenstein 09.04.2022 16:48

Другие вопросы по теме