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

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>    Jsconst filterItems = list.filter(      (item) => item.searchWords.indexOf(searchWord) !== -1,    );我想要的结果是搜索结果实时更新。例如使用上面相同的数据结构，当用户搜索'a'时，searchWords 'aa' 和 'ab' 返回 true 以显示项目，非常感谢你的帮助。

Answer 1

您可以尝试使用find()和includes()对象的 name 属性，最后使用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 2

您需要遍历 searchWords 数组以查找它是否与搜索词匹配。这个会工作

const filterItems = list.filter(

      (item) => item.searchWords.filter((myWord) => myWord.indexOf(searchWord)>-1)

    );

Answer 3

代码的问题在于，当您使用 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">

  </>