如何在javascript中动态构建数组过滤器表达式

Question

我需要一个函数来过滤我的数组并根据用户输入返回结果。

var Myarray= [
  {Date:"1-Jan-2020",Name:"A", Id: 1},
  {Date:"1-Feb-2020",Name:"B", Id: 2},
  {Date:"1-Mar-2020",Name:"C", Id: 3}
  ...
]

过滤器需要是动态的。用户必须至少输入日期或姓名或同时输入两者。 ID 是可选的

有没有一种聪明的方法可以根据用户输入的内容在函数中构建过滤器表达式？

更多信息： 我有一个用户界面。用户将有搜索参数可供选择返回日期。日期、姓名和 ID。用户必须至少选择日期或名称。 ID 是可选的，但必须在接受发送参数的函数中考虑。用户输入值后，它们被传递给一个 JS 函数，该函数应该过滤一个保存数据的数组。将过滤器应用于数组后，将使用过滤后的数据填充一个新数组。 Ex.user 发送没有名称或 ID 的日期，然后数组仅根据日期进行过滤。例 2。用户发送不带日期或 ID 的名称，然后数组仅根据名称过滤。例 3。用户发送不带 id 的日期和名称，然后根据日期和名称进行数组过滤。例 4。用户发送不带名称的日期和 ID，然后根据日期和 ID 进行数组过滤。例 5。用户发送不带日期的名称和 ID，然后按名称和 ID 进行数组过滤。 ex6 用户发送日期、姓名和 ID，然后根据日期、姓名和 ID 进行数组过滤。 Ex7 用户发送 id，功能不允许单独发送 id 没有日期或名称

Answer 1

您可以使用Array.prototype.some (OR) 来链接谓词。如果在任何时候一个谓词匹配，整个项目将被添加到结果列表中。

如果您希望所有条件都匹配，则需要使用Array.prototype.every (AND) 链接。

我可能很快就会回到这个，举一个更动态的例子。 见下文。

const main = () => {
  let arr = [
    { Date: "1-Jan-2020" , Name: "A"  , Id: 1 }, // Yes
    { Date: "1-Feb-2020" , Name: "B"  , Id: 2 }, // Yes
    { Date: "1-Mar-2020" , Name: null , Id: 3 }, // Yes
    { Date: null         , Name: null , Id: 4 }  // No
  ]
  
  console.log(filterWithPredicates(arr, predicates))
}

const predicates = {
  date: (record) => record.Date != null,
  name: (record) => record.Name != null
};

const filterWithPredicates = (list, predicates) => {
  return list.filter(item => {
    return Object.values(predicates).some(predicate => {
      if (predicate(item)) { return true }
    })
    return false
  })
}

main()

.as-console-wrapper { top: 0; max-height: 100% !important; }

---

这是一个谓词链接的例子。

const Predicates = {
  date: (record) => record.Date != null,
  name: (record) => record.Name != null
}

const main = () => {
  let arr = [
    { Date: "1-Jan-2020" , Name: "A"  , Id: 1 }, // Yes
    { Date: "1-Feb-2020" , Name: "B"  , Id: 2 }, // Yes
    { Date: "1-Mar-2020" , Name: null , Id: 3 }, // Yes
    { Date: null         , Name: null , Id: 4 }  // No
  ]
  
  let filter = new Filter().chain().or(Predicates.date).or(Predicates.name)
  console.log(filter.execute(arr))
}

class Filter {
  constructor() {
    this.filters = []
  }
  chain() {
    this.filters = []
    return this
  }
  or(predicate) {
    this.filters.push({ fn : predicate, op : 'or' })
    return this
  }
  and(predicate) {
    this.filters.push({ fn : predicate, op : 'and' })
    return this
  }
  execute(items) {
    return items.reduce((results, item) => 
      this.__shouldKeepItem(item) ? results.concat(item) : results, [])
  }
  /** @private */
  __startCondition() {
    return this.filters.length ? this.filters[0].op === 'and' ? 1 : 0 : 0
  }
  /** @private */
  __shouldKeepItem(item) {
    return this.filters.reduce((keep, filter) => {
      switch (filter.op) {
        case 'or'  : return keep || filter.fn(item)
        case 'and' : return keep && filter.fn(item)
        default    : return keep
      }
    }, this.__startCondition())
  }
}

main()

.as-console-wrapper { top: 0; max-height: 100% !important; }

Answer 2

const Myarray= [
  {Date:"1-Jan-2020",Name:"A", Id: 1},
  {Date:"1-Feb-2020",Name:"B", Id: 2},
  {Date:"1-Mar-2020",Name:"C", Id: 3}
];

const customFilter = (array, expr) => {
  if (Object.keys(expr).length == 0) {
    console.log("Error! missing at least one filter expression");
    return null;
  }
  /* if expression doesn't exist it's a pass for all items */
  return array.filter(item => !expr.Date || item.Date == expr.Date).filter(item => !expr.Name || item.Name == expr.Name).filter(item => !expr.Id || item.Id == expr.Id)
}

console.log(customFilter(Myarray, {Date: "1-Jan-2020", Name: "B"}))
console.log(customFilter(Myarray, {Date: "1-Jan-2020"}))
console.log(customFilter(Myarray, {Name: "B"}))
console.log(customFilter(Myarray, {Id: 3}))
console.log(customFilter(Myarray, {}))

Answer 3

试试：

var filteredArray = Myarray.filter(function (item) {
   return item.Date !== undefined && item.Name !== undefined;
});
var filteredArrayWithOptionalId = Myarray.filter(function (item) {
   return item.Date !== undefined && item.Name !== undefined && item.Id !== undefined;
});

您现在有 2 个数组，一个包含必需的参数对象，另一个可以处理可选 ID。然后，您可以循环通过filteredArrayWithOptionalId来处理与ID相关的代码。

在此处查看类似问题的答案：How to filter object array based on attributes?

我还建议您将变量名小写，因为这是最佳实践，只要它们不是类即可。