时间戳

首页 > 解决方案 > 优化对象数组的搜索

javascript - 优化对象数组的搜索

问题描述

我有一个长度为 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_list5,866 个会导致我的过滤方式出现性能问题。我想在用户输入时实时过滤数据。

标签： javascriptreactjs

解决方案

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

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

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

根据这个堆栈溢出答案，正则表达式会快很多（特别是对于 Chrome）：

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

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

更新

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

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

推荐阅读