使用javascript有效地搜索字符串数组中的字母

Question

I have an array of products as below

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

If a user types any word on the input field, i want to get all matching products from the array. for eg if user types 'ma', then i would expect the result to contain ['washing machine', 'sewing machine']

In order to achieve the desired result, i do this code below

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

I know this above code works to get the desired result. but suppose the totalProducts array has a length of over 1000. Will my method above efficiently give the result as it should ?

Or is there a better way to search and improve performance of my code ?

Answer 1

Since .filter() and .includes() are both constant time (o(n)), the total time complexity is O(2n).

The only way I can think of to improve the performance of the code would be to cache (or otherwise store) the filtered results array, and then further filter that array unless the user backspaces.

Answer 2

sometimes when your data is too large you run out of possibilities to obtain more efficient methods, what i suggest is to actually filter your data in your backend and add a spinner as a visual feedback for the user. also debouncing you onKeyDown listener should be used to avoid flooding your server with http requests for each key press.

Answer 3

It is a tradeoff between space and time. There is indeed a faster approach, but the array needs to be processed beforehand to build an index, which takes up memory. If you build a suffix tree with an index of each string in a leaf, you can simply find the appropriate subtree and enumerate all the indices contained in it.

Let me use a smaller example, for the sake of size in this answer. Assume you have "pit,spit,pot,spot". A suffix tree of those strings is

(Thanks to this site for the visualisation.) If you want to find the strings that contain "po", starting from the root, take the "p" node, then the "o" node (here collapsed into the "ot$" node). The subtree under it contains links to strings #3 and #4 (this site indexes them from 1), ie "pot" and "spot". (This site also notes that the substring starts at position 1 for "pot" and position 2 for "spot", but for your purpose this information is not required.)

As you can see, the process of finding the matching strings is very fast; but the requisite suffix tree would be much larger than the original list. If you want to restrict the search to only match the start of words (for example, "ma" would match "washing machine", but "chi" would not), you could reduce the tree size.

However, the gains would, for most purposes, be negligible for a single search; this would probably only be needed if you need to perform the search repeatedly, fast. For an array of thousands of elements and a single lookup once in a while, your original approach is almost certainly good enough. The suffix tree approach is faster, but for the use case in the OP, an overkill, and a case of premature optimisation.