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

Question

我试图搜索功能。此函数检查具有多个字符串的嵌套数组，然后返回该数组是否有搜索词。

数组的数据结构

[

  {

   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 函数。

但是，我无法使用下面的代码显示任何组件。

但是我在代码中将目标值从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

您可以尝试使用find()和includes()对象的 name 属性，最后使用filter().演示：var list = [&nbsp; {&nbsp; &nbsp;name:'aa',&nbsp; &nbsp;searchWords:['aa','ab','bc']&nbsp;&nbsp; },&nbsp; {&nbsp; &nbsp;name:'bb',&nbsp; &nbsp;searchWords:['bb','bc','de']&nbsp; }]document.getElementById('searchWord').addEventListener('input', function(){&nbsp; console.clear();&nbsp; var filterItems = list.find(item => item.name.includes(this.value));&nbsp; filterItems = filterItems ? filterItems.searchWords : [];&nbsp; filterItems = filterItems.filter(i => i.includes(this.value));&nbsp; console.log(filterItems);});<input id="searchWord"/>

Answer 2

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

Answer 3

代码的问题在于，当您使用 indexOf 时，它会尝试查找数组是否包含单词。例如：当您搜索 'a' 时，代码会检查数组中是否有任何单词 'a' 而不是任何包含字母 'a' 的单词。您需要将 JS 部分更改为：JSconst list = [{&nbsp; &nbsp; name: 'aa',&nbsp; &nbsp; searchWords: ['aa', 'ab', 'bc']&nbsp; },&nbsp; {&nbsp; &nbsp; name: 'bb',&nbsp; &nbsp; searchWords: ['bb', 'bc', 'de']&nbsp; }];let searchWord = "a";const filterItems = list.filter(&nbsp; (item) => item.searchWords.filter(word => word.includes(searchWord)).length > 0);document.getElementById('result').innerHTML = JSON.stringify(filterItems);<p id="result">&nbsp; </>