Question

我在这里过滤项目：

let filter = this.props.data.filter(
  (item) => {
    return (
      item.fname.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1 ||
      item.lname.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
    );
  }
);

因此，只要用户在输入字段中输入内容，我就在更新我的表。但是，不仅有fname和lname，还有一个名为[children]的数组字段，其中包含该人拥有的孩子的名字：

children : ["Bob", "Andrew", "Mary-Jane"]

我还想过滤是否键入了那些名称。我该怎么做？我是一个javascript / React初学者，所以我将不胜感激！

Answer 1

您可以使用some来检查数组中的任何元素是否将搜索词作为子字符串：

const search = this.state.search.toLowerCase();
let filter = this.props.data.filter(
  (item) => {
    return (
      item.fname.toLowerCase().includes(search) ||
      item.lname.toLowerCase().includes(search) ||
      item.children.some(child => 
        child.toLowerCase().includes(search)
      )
    );
  }
);

Answer 2

您可以采用竞争激烈的动态方法，并且仅采用所需的属性数组进行迭代。如果发现短路，请退出。

const search = this.state.search.toLowerCase();
let filter = this.props.data.filter(item => ['fname', 'lname', 'children'].some(k =>
        Array.isArray(item[k])
            ? item[k].some(v => v.toLowerCase().includes(search))
            : item[k].toLowerCase().includes(search)
    ));

同时过滤数组和字符串？

2 个答案: