根据传递的输入过滤对象数组：Javascript

Question

我有一个具有以下结构的对象数组

arr = [ { name: "abc" , items: ["itemA","itemB","itemC"], days :138} ,
        { name: "def" , items: ["itemA1","itemB2","itemC1"], days :157} ,
        { name: "hfg" , items: ["itemAN","itemB7","itemC7"], days :189} ]

此数组需要根据传递的搜索输入进行过滤。我能够为 name 实现相同的效果，其中天数没有被过滤。

也有人可以帮助如何搜索 items 数组，以便它根据传递的输入过滤行

这是我尝试过的

  handleSearch = (arr, searchInput) => {
    let filteredData= arr.filter(value => {
      return (
        value.name.toLowerCase().includes(searchInput.toLowerCase()) ||
        value.days.toString().includes(searchInput.toString())
      );
    });
    console.log(filteredData);
    //this.setState({ list: filteredData });
  }

Answer 1

您可以使用Array#some，然后执行您已经完成的相同类型的匹配：

some() 方法测试数组中的至少一个元素是否通过了提供的函数实现的测试。它返回一个布尔值。

  handleSearch = (arr, searchInput) => {
    const filteredData = arr.filter(value => {
      const searchStr = searchInput.toLowerCase();
      const nameMatches = value.name.toLowerCase().includes(searchStr);
      const daysMatches = value.days.toString().includes(searchStr);
      const oneItemMatches = value.items.some(item => item.toLowerCase().includes(searchStr));

      return nameMatches || daysMatches || oneItemMatches;
    });
    console.log(filteredData);
    //this.setState({ list: filteredData });
  }

Answer 2

由于您的搜索值可以应用于数据数组中的所有字段，因此您可以将这些值组合到一个数组中（逐行）并在一个位置执行搜索。

为此，我在下面提供了一个 sn-p，它将过滤原始数组，在转换后检查每个对象的值。这些涉及使用Object.values() 来获取数组中对象的值，由于该数组是嵌套的，我们可以使用Array.flat() 将其扁平化为字符串和数字，最后调用Array.some() 来检查是否有的值部分包括搜索值（在它们都是小写-d 之后）。

const arr = [
    { name: "abc" , items: ["itemA","itemB","itemC"], days: 138 },
    { name: "def" , items: ["itemA1","itemB2","itemC1"], days: 157 },
    { name: "hfg" , items: ["itemAN","itemB7","itemC7"], days: 189 }
];

const handleSearch = (arr, searchInput) => (
    arr.filter((obj) => (
        Object.values(obj)
              .flat()
              .some((v) => (
                  `${v}`.toLowerCase().includes(`${searchInput}`.toLowerCase())
              ))
    ))
);

console.log('"A1" =>', JSON.stringify(handleSearch(arr, 'A1')));
console.log('189 =>', JSON.stringify(handleSearch(arr, 189)));
console.log('"nope" =>', JSON.stringify(handleSearch(arr, 'nope')));

注意： 这种方法有一个明显的缺陷，它会将数字作为字符串进行搜索，这意味着提供89 作为搜索值仍然会返回第二个元素.