Question

我想在表中进行搜索。我正在实现以下逻辑：

    this.props.searchFunc.forEach(function(item) {
      if (item.name.toLowerCase().indexOf(document.getElementById("name").value.toLowerCase().trim()) != -1 &&
             ??
      // here i want to map through `test` array and check if the value is present in the array
    })

在item.name中，只有一个字符串。在放置??的第二个id中，我有一个数组，名称为test，值["abc","def","ghi"]。

但是我不明白如何通过数组进行映射并检查条件是否存在该字符串。我知道数组映射功能：

item.test.map(function(item,id) {
  if(item.toLowerCase().indexOf(document.getElementById("name2").value.toLowerCase().trim()) != -1)
})

但是问题在于如何同时检查这两个条件，因为只有在两个条件都满足的情况下搜索才可以工作。

Answer 1

使用filter和&&。

过滤器将返回所有符合回调函数条件的项目。就您而言，您只有一个条件。您可以使用“和”运算符添加另一个条件：&&。如果数组中的一项符合两个条件，则将其包括在内。

item.test.filter(function(item, id) {
    if (
        item.toLowerCase().indexOf(document.getElementById("name").value.toLowerCase().trim()) != -1 
        && //some other condition
       ) {
        return item
       }
   })

修改

根据您的问题，我假设您的searchFunc看起来像这样：

const searchFunc = [
  { name: "ABC", test: ["def", "another value"] },
  { name: "ABC", test: ["ghi", "def"] },
  { name: "Not I List", test: ["also not in list"] },
  { name: "ABC", test: ["Does not meet second condition"] }
];

还有您的test数组：

const test = ["abc", "def", "ghi"];

似乎您想过滤名称等于document.getElementById("name").value.toLowerCase().trim())返回值且其item.test数组包含document.getElementById("name2").value.toLowerCase().trim())值的项目。

因此，举例来说，让我们将这些值保存在分别返回值abc和def的变量中：

const value1 = document.getElementById("name").value.toLowerCase().trim()) // abc
const value2 = document.getElementById("name2").value.toLowerCase().trim()) // def

现在，我们可以过滤具有item.name === value1且其item.test数组包含value2的值：

const filteredItems = searchFunc.filter(function(item) {
  if (
    item.name.toLocaleLowerCase() === value1 &&
    item.test.indexOf(value2) !== -1
  ) {
    return true;
  }
});

这是一个代码段：

const test = ["abc", "def", "ghi"];

const value1 = document.getElementById("name").value.toLowerCase().trim() // abc
const value2 = document.getElementById("name2").value.toLowerCase().trim() // def


const searchFunc = [
  { name: "ABC", test: ["def", "another value"] },
  { name: "ABC", test: ["ghi", "def"] },
  { name: "Not I List", test: ["also not in list"] },
  { name: "ABC", test: ["Does not meet second condition"] }
];

const filteredItems = searchFunc.filter(function(item) {
  if (
    item.name.toLocaleLowerCase() === value1 &&
    item.test.indexOf(value2) !== -1
  ) {
    return true;
  }
});

console.log(filteredItems);

 <input type="text" id="name" value="abc"> 
 <input type="text" id="name2" value="def">

在ReactJS中实现搜索功能

1 个答案: