使用javascript有效地搜索字符串數組中的字母

Question

我有一系列產品如下

const totalProducts = ['washing machine', 'sewing machine', 'refrigerator', 'desk']

如果用戶在輸入字段中鍵入任何單詞，我想從數組中獲取所有匹配的產品。 例如，如果用戶鍵入“ma”，那么我希望結果包含['washing machine', 'sewing machine']

為了達到預期的結果，我在下面執行此代碼

var result = totalProducts.filter((product) => product.includes('ma'));

我知道上面的代碼可以得到想要的結果。 但假設 totalProducts 數組的長度超過 1000。我上面的方法會有效地給出它應該得到的結果嗎？

還是有更好的方法來搜索和提高我的代碼性能？

Answer 1

由於.filter()和.includes()都是常數時間 (o(n))，因此總時間復雜度為 O(2n)。

我能想到的提高代碼性能的唯一方法是緩存（或以其他方式存儲）過濾后的結果數組，然后進一步過濾該數組，除非用戶退格。

Answer 2

有時當您的數據太大時，您將無法獲得更有效的方法，我建議在后端實際過濾您的數據並添加微調器作為用戶的視覺反饋。 還應該使用 onKeyDown 偵聽器去抖動，以避免每次按鍵都用 http 請求淹沒您的服務器。

Answer 3

這是空間和時間之間的權衡。 確實有更快的方法，但是需要事先處理數組建立索引，占用內存。 如果您使用葉子中每個字符串的索引構建后綴樹，您可以簡單地找到適當的子樹並枚舉其中包含的所有索引。

為了這個答案的大小，讓我使用一個較小的例子。 假設你有“pit,spit,pot,spot”。 這些字符串的后綴樹是

（感謝這個網站的可視化。）如果你想找到包含“po”的字符串，從根開始，取“p”節點，然后是“o”節點（這里折疊成“ot$”節點）。 它下面的子樹包含指向字符串#3 和#4 的鏈接（這個站點從1 開始索引它們），即“pot”和“spot”。 （該站點還指出，“pot”的子字符串從位置 1 開始，“spot”的子字符串從位置 2 開始，但出於您的目的，此信息不是必需的。）

如您所見，查找匹配字符串的過程非常快； 但必要的后綴樹會比原始列表大得多。 如果您想將搜索限制為僅匹配單詞的開頭（例如，“ma”將匹配“washing machine”，但“chi”不會），您可以減小樹的大小。

但是，對於大多數目的，單次搜索的收益可以忽略不計； 這可能僅在您需要快速重復執行搜索時才需要。 對於數千個元素的數組和偶爾的一次查找，您的原始方法幾乎可以肯定足夠好。 后綴樹方法更快，但對於 OP 中的用例來說，這是一種矯枉過正和過早優化的情況。