使用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 中的用例来说，这是一种矫枉过正和过早优化的情况。