多个字段的数组过滤答案

【问题标题】：Array filtering on multiple fields多个字段的数组过滤
【发布时间】：2017-11-26 14:06:41
【问题描述】：

我有这段代码，可以过滤我的数据。我在问我，是否有办法不明确过滤每个字段（id、mandant、zonenlogik...）。也许有一种更流畅的方法可以在所有字段上设置过滤器而不显式调用它们？

let filteredList = this.state.freights.filter((freight) => {

    if (freight.id.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1) {
        return freight;
    }
    if (freight.mandant.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1) {
        return freight;
    }
    if (freight.zonenlogik.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1) {
        return freight;
    }
    if (freight.frachtart_nr.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1) {
        return freight;
    }
    if (freight.transportart_nr.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1) {
        return freight;
    }
    if (freight.spedit_nr.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1) {
        return freight;
    }
    if (freight.spedit2_nr.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1) {
        return freight;
    }
    if (freight.lager_nr.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1) {
        return freight;
    }
});

【问题讨论】：

为了简化代码，首先可以复用this.state.search.toLowerCase()等变量。此外，您可以将类似的逻辑与函数进行分组。

标签： javascript arrays reactjs filter

【解决方案1】：

我假设您想要另一个与您发布的代码实现相同结果的代码。这是我的：

const searchTerm = this.state.search.toLowerCase();

let filteredList = this.state.freights.filter((freight) => {
    // get all keys of freight
    const keys = Object.keys(freight).map(k => k.toLowerCase());
    for (let k of keys) {
      // if key (e.g id) matches the search term, return freight
      if (k.indexOf(searchTerm) !== 1) {
        return true; // we want this freight object
      } 
    }
    return false;
});

【讨论】：

【解决方案2】：

您可以使用Object.values() 获取对象值，然后遍历这些值以检查字符串中是否存在子字符串，然后返回过滤后的对象

let filteredList = this.state.freights.filter((freight) => {
    let search = this.state.search.toLowerCase();
    var values = Object.values(freight);
    var flag = false
    values.forEach((val) => {
      if(val.toLoweCase().indexOf(search) > -1) {
           flag = true;
           return;
       }
     }
     if(flag) return freight
});

【讨论】：

只是一个小更新，你不能对非字符串值使用 toLowerCase()，所以你应该测试以确保在 indexOf 的 if 块中有一个字符串，只是为了安全，你有“toLoweCase”，应该是“toLowerCase”。

【解决方案3】：

这是 es5 单行代码（有点）：

let filteredList = this.state.freights.filter(freight =>
  Object.keys(freight).some(
    key =>
      freight[key]
        .toLowerCase()
        .indexOf(this.state.search.toLowerCase()) !== -1,
  ),
);

【讨论】：