如何過濾數組中的字符串？

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"> </>