如何使用新函数创建自定义链式过滤器方法

Question

情况

我有一个 table 并且对于每一列，用户可以设置多个过滤器，例如：

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.log(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.log(testFn(y, colVal )); // 22 > 10 && 22 < 40 && 22 == 22

是否有将自定义字符串实现到 new Function 方法中的想法？

Answer 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.log(fnString)
console.log(fn(columnData, filters))

如何使用新函数创建自定义链式过滤器方法

How to create a custom chained filter method with new Function

javascript

string

methods

function

情况

数据

草稿

目标