优化对象数组的搜索答案

【问题标题】：Optimizing search of array of objects优化对象数组的搜索
【发布时间】：2019-05-18 01:01:48
【问题描述】：

我有一个长度为 5,866 的对象数组，格式如下{label: "Luke Skywalker", value: "556534"} 我正在搜索对象并按它们的标签过滤，就像这样

  onChange = (e) => {
        e.persist()
         this.setState({filter:e.target.value, filtered_array: 
            this.state.raw_user_list.filter(user =>
              user.label.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1)})
    }

...
     <form style={{paddingBottom:'10px'}}>
              Filter: <input name="filter" value={this.state.filter} onChange={this.onChange} type="text" style={{
                border: '1px solid #cccccc',
              }}/>
            </form>

this.state.filter 是输入过滤的值。在我最初使用少于 1,000 个条目之前，现在 user_list 为 5,866 会导致我的过滤方式出现性能问题。我想在用户输入时实时过滤数据。

【问题讨论】：

不要为每次迭代执行e.target.value.toLowerCase()。将其存储在您从迭代函数引用的范围变量中。这是一个简单的解决方法，应该会给你立竿见影的效果。
除了外部化小写字母（您在每个循环中都重复）之外，如果允许，您可能会考虑使用一些外部库。在这种情况下，Fuse.js 似乎是你的朋友：github.com/krisk/Fuse
问题更可能与您使用它的方式有关。 5900 个元素并不多
好的，让我根据 cmets 重新构建它。之后我会研究 Fuse.js。我想避免使用其他库。
onChange 中的一些限制如果与连续输入有关会有所帮助

标签： javascript reactjs

【解决方案1】：

我可以想到 2 种方法来优化您的搜索功能：

使用includes而不是indexOf，它不返回索引，而只返回真/假

this.state.raw_user_list.filter(user => user.label.toLowerCase().includes(e.target.value.toLowerCase()))

根据this stack overflow answer，Regex 会快很多（特别是对于 Chrome）：

this.state.raw_user_list.filter(user => user.label.match(new RegExp(e.target.value, 'i')))

在您的正则表达式中使用“i”选项意味着它不区分大小写

更新

根据these tests，您的函数可以比使用缓存正则表达式的前一个函数更快：

const rValue = new RegExp(e.target.value, 'i')
this.state.raw_user_list.filter(user => rValue.test(user.label))

【讨论】：

【解决方案2】：

您可以使用 Trie 数据结构 (https://github.com/Draluy/MCsolver/blob/master/src/services/DictService.js)

基本上，这将使您更快地找到单词。我在一个项目中使用它来存储字典中的所有单词，搜索通常不到一毫秒。

你可以在这里找到我的实现： https://github.com/Draluy/MCsolver/blob/master/src/services/DictService.js

【讨论】：