Question

我有一个长度为5866的对象数组，格式如下：{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，这导致我过滤的方式出现性能问题。我想在用户键入内容时实时过滤数据。

Answer 1

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

使用includes代替indexOf，wich不会返回索引，而只会返回true / false

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，您的函数可以比使用缓存的Regex的上一个函数更快：

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

Answer 2

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

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

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

优化对象数组的搜索

2 个答案: