使用 Javascript/react/redux 過濾大量數據的最佳方法是什么

Question

在我的例子中，我使用的是90k [...]最小 JSON 數據，目前我正在使用.filter 方法。 一切都完美無誤，沒有任何問題，但只是出於性能的觀點，我想知道，也需要建議，我們可以使用哪種方式來提高滲透率，你同意嗎，或者我們有更好的方法來提高性能。

所有來自后端的請求都不能修改和拆分。

作為參考，添加大約需要 1 秒的5k 數據。

我重視所有的開發時間，我也添加了一個代碼片段。

感謝任何幫助和建議。

 const load5kData = async () => { let url = 'https://jsonplaceholder.typicode.com/photos'; let obj = await (await fetch(url)).json(); const filteredValue = obj.filter(item => item.albumId == 36); console.log(filteredValue) } load5kData();

 <h1>5k data</h1>

Answer 1

看起來返回的響應是按升序排列的 albumId。 一旦達到 id 37，您就可以通過使用傳統的 for 循環和短路來利用它。

在我看來，如果您只是使用過濾方法沒有遇到性能問題，我會說留下它並且不要過度優化！

另一種選擇是只有 50 個項目的 albumId == 36。您可以在 json 文件中創建自己的所有這些對象的數組。 但是，如果 api 的結果發生變化，您顯然會失去獲取最新圖像的機會

Answer 2

filter實際上是您唯一的解決方案，它將涉及遍歷每個元素。

如果您需要對相同的數據進行多次搜索，您可以通過您將使用的鍵對數據進行索引，因此查找具有特定albumId的數據不需要額外的過濾，但在初始索引時仍需要迭代每個元素。

 const indexByAlbumId = data => data.reduce((a, c) => { if (a[c.albumId] === undefined) { a[c.albumId] = [c]; } else { a[c.albumId].push(c); } return a; }, {}); const load5kData = async () => { const url = 'https://jsonplaceholder.typicode.com/photos'; const data = await (await fetch(url)).json(); const indexedData = indexByAlbumId(data); console.log('36', indexedData[36]); console.log('28', indexedData[28]); }; load5kData();

另一個優化是，如果數據按您正在搜索的索引排序，您可以通過分而治之搜索來利用這一點，您首先嘗試找到一個值是您需要的條目，然后從那里找到在哪里該塊通過對該元素的左側/右側進行相同的分而治之來開始/結束。

Answer 3

Currently using: obj.filter(item => item.albumId == 36);