У меня есть таблица, и для каждого столбца пользователь может установить несколько фильтров, например:
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
?
Вы можете создать строку условного фильтра на основе массива фильтров, используя методы 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))
Спасибо, выглядит так, как я хотел! Позвольте мне обдумать то, что мне не хватало.