如何正確過濾數組（同時保留原始數據）

Question

我有一個問題，我不知道如何正確解決。

我有一個數組，用於填充我的 DataTable，當將值添加到數組時，它也會反映在表中。 添加和刪除效果很好。 當用戶在搜索字段中輸入一些數據時，我想如何搜索數組，並且如果用戶輸入數據並按“搜索”它可以工作，但是我希望搜索響應輸入更改，所以每次用戶按下某個字母時它開始過濾器。

 let people = [
{ name: 'Jack', lastName: 'London', age: 25, id: 1 },
{ name: 'John', lastName: 'Doe', age: 33, id: 2 },
{ name: 'Jamie', lastName: 'Mith', age: 22, id: 3 },
  ];



 function sortArray(string) {
    var arr = [];
    for (var i = 0; i < people.length; i++) {
      if (people[i].string == string) arr.push(people[i]);
    }
    return (people = [...arr]);
  }

現在事情有點復雜，假設用戶在搜索框中輸入字母 S，function 過濾器數組，（現在數組中沒有任何內容），所以我需要在某處保存原始數組的值作為參考

我確實嘗試過過濾它，

function filter(arr, string) {
var regex = new RegExp('.*' + string + '.*');
return arr.filter(function (el) {
  return regex.exec(el.name);
});

}

但也沒有運氣。

我正在使用 Svelte、IBM Carbon 數據表（盡管我認為這不會改變任何東西）。

我什至可能會以某種方式使其工作，但我認為這將非常無能，所以如果有人有解決方案，我將非常感激。

另外，當我們使用擴展運算符復制數組且數據量適中時，成本（性能方面）是多少？

Answer 1

過濾/性能：

在過濾方面， array.filter從來沒有讓我在性能方面失望過，我曾遇到過過濾多達 10.000 個項目而您甚至沒有注意到的情況。 您也無法通過使用上次搜索的子集來改進搜索。 用戶可以一起退格或刪除過濾器，因此對原始子集進行過濾基本上是必須的。

在性能方面，最大的問題是可視化。 如果您有一個表格可以同時可視化所有記錄，那么它們都必須被渲染，這是很昂貴的。 因此，例如支持分頁的組件可以提高您的性能。 因此， array.filter不會成為您的瓶頸。

邏輯（旁注）：

您的過濾器至少有 1 個問題。 您使用.* => 這意味着您將永遠無法過濾名稱的第一個或最后一個字母，.? 解決了這個問題。

樣本：

我添加了最邊緣的樣本（基於您的數據）來對數據進行快速過濾。 僅供參考。 都是內聯的，沒有花哨的東西。


<html>
  <body>
    <input type="text" id="input" />
    <ul id="output">
    </ul>
  </body>
  <script>
   let people = [
    { name: 'Jack', lastName: 'London', age: 25, id: 1 },
    { name: 'John', lastName: 'Doe', age: 33, id: 2 },
    { name: 'Jamie', lastName: 'Mith', age: 22, id: 3 }
   ];
   
   function filter(arr, string) {
     var regex = new RegExp('.?' + string + '.?');
     return arr.filter(function (el) {
       return regex.exec(el.name);
     });
   };
   
   const inp = document.getElementById("input");
   const outp = document.getElementById("output");
   
   inp.addEventListener("keyup", event => {
     render();
   });
   
   function render(){
     var result = filter(people, inp.value);
     outp.innerHTML = '';
     for (var i = 0; i < result.length; i++){
       var node = document.createElement("li");
       node.appendChild(document.createTextNode(result[i].name));
       outp.appendChild(node);
     }
     console.log(result);
   };
  </script>
</html>

Answer 2

您可能希望顯示搜索結果數據，而不是顯示/修改您的數據。 您仍然可以照常添加/編輯/刪除原始數據，但僅在數據表中顯示與搜索查詢匹配的項目，或者在搜索查詢為空時顯示所有項目。

您可以使用任何 function 在使用 IBM Carbon DataTable 時返回一個對象數組作為行的值，一個簡單的示例可能如下所示：

<script>
 import { DataTable } from "carbon-components-svelte";
 let  value = "";
 let people = [
    { name: 'Jack', lastName: 'London', age: 25, id: 1 },
    { name: 'John', lastName: 'Doe', age: 33, id: 2 },
    { name: 'Jamie', lastName: 'Mith', age: 22, id: 3 }
 ];

 function search(items, query) {
    if (!query) {
        return items
    }
    const results = items.filter(item => {
        // Replace with whatever filter method you like
        return item.name.toLowerCase().includes(query.toLowerCase()) || item.lastName.toLowerCase().includes(query.toLowerCase())
    })
    return results
}
</script>

<label for="search">
  <input id="search" bind:value />
</label>
<!-- The rows value calls a function that returns an array after filtering it, this will be called on every change to the query -->
<DataTable
  headers={[{ key: 'name', value: 'First name' }, { key: 'lastName', value: 'Last name' }, { key: 'age', value: 'Age' }, { key: 'id', value: 'Id' }]}
  rows={search(people, value)}
/>

如何正確過濾數組（同時保留原始數據）

問題描述

2 個解決方案

解決方案1
0 2021-03-25 07:00:32

解決方案2
0 已采納 2021-03-25 10:19:55

如何正確過濾數組（同時保留原始數據）

問題描述

2 個解決方案

解決方案1 0 2021-03-25 07:00:32

解決方案2 0 已采納 2021-03-25 10:19:55

解決方案1
0 2021-03-25 07:00:32

解決方案2
0 已采納 2021-03-25 10:19:55