如何过滤数组中的字符串？

Question

我试图搜索 function。 这个 function 检查嵌套数组，它有多个字符串，如果数组有搜索词则返回。

数组的数据结构

[
  {
   name:'aa',
   searchWords:['aa','ab','bc'] <- I want to use this array for search
  },
  {
   name:'bb',
   searchWords:['bb','bc','de'] <- I want to use this array for search
  },
...
]

我尝试使用 indexOf function。
但是，我无法使用下面的代码显示任何组件。
但是我在代码中将目标值从item.searchWords更改为item.name 。 有效。

HTML
<div className="itemWrapper">
     {filterItems.map((item, idx) => (
            <Item key={idx} {...item} id={idx} list={list} />
      ))}
</div>    


Js
const filterItems = list.filter(
      (item) => item.searchWords.indexOf(searchWord) !== -1,
    );

我想要的结果是搜索结果实时更新。
例如上面相同的数据结构，当用户搜索'a'时，searchWords 'aa'和'ab'返回true以显示项目，

非常感谢你的帮助。

Answer 1

您需要遍历 searchWords 数组以查找它是否与搜索词匹配。 这个会起作用
const filterItems = list.filter( (item) => item.searchWords.filter((myWord) => myWord.indexOf(searchWord)>-1) );

Answer 2

您可以尝试在 object 的 name 属性上使用find()和includes() ，最后使用filter() 。

演示：

 var list = [ { name:'aa', searchWords:['aa','ab','bc'] }, { name:'bb', searchWords:['bb','bc','de'] } ] document.getElementById('searchWord').addEventListener('input', function(){ console.clear(); var filterItems = list.find(item => item.name.includes(this.value)); filterItems = filterItems? filterItems.searchWords: []; filterItems = filterItems.filter(i => i.includes(this.value)); console.log(filterItems); });

 <input id="searchWord"/>

Answer 3

您可以使用array#reduce并通过检查搜索词使用array#filter过滤searchWords数组。

 const dataSource = [{ name: 'aa', searchWords: ['aa', 'ab', 'bc'] }, { name: 'bb', searchWords: ['bb', 'bc', 'de'] } ], searchWord = 'a', result = dataSource.reduce((res, {name, searchWords}) => { let matched = searchWords.filter(word => word.includes(searchWord)); if(matched.length) { res.push({name, searchWords: matched}); } return res; },[]) console.log(result);

Answer 4

这是因为indexOf如何使用array和strings工作。

假设 indexOf 的语法是

operatedItem.indexOf(searchedItem);

在这里，在你的情况下

{
   name:'bb',
   searchWords:['bb','bc','de']
}

名称是一个字符串，

并且searchWords 是一个数组。

当你执行：

name.indexOf("b"); //0

name.indexOf("bb"); //0

name.indexOf("a"); //-1

它将检查searchedItem是否存在于operatedItem中的任何位置。

 let str = "aa ab a bb"; console.log(str.indexOf("a")); //0 console.log(str.indexOf("aa")); //0 console.log(str.indexOf("ab")); //3 console.log(str.indexOf("b")); //4 console.log(str.indexOf("c")); //-1 console.log(str.indexOf("aaa")); //-1

当indexOf 与 array 一起使用时，

它检查operatedItem项数组中是否存在searchedItem ，它不会 go 用于 substring 搜索。

 let arr = ["aa", "ab", "a", "bb"]; console.log(arr.indexOf("a")); //2 console.log(arr.indexOf("aa")); //0 console.log(arr.indexOf("ab")); //1 console.log(arr.indexOf("b")); //-1 console.log(arr.indexOf("c")); //-1 console.log(arr.indexOf("aaa")); //-1

Answer 5

代码的问题在于，当您使用 indexOf 时，它会尝试查找数组是否包含单词。 例如：当您搜索“a”时，代码会检查数组中是否有任何单词“a”，而不是任何包含字母“a”的单词。

您需要将 JS 部分更改为：

JS

 const list = [{ name: 'aa', searchWords: ['aa', 'ab', 'bc'] }, { name: 'bb', searchWords: ['bb', 'bc', 'de'] } ]; let searchWord = "a"; const filterItems = list.filter( (item) => item.searchWords.filter(word => word.includes(searchWord)).length > 0 ); document.getElementById('result').innerHTML = JSON.stringify(filterItems);

 <p id="result"> </>