前端vue 从几万条数据中查找出来一条 查询过程非常慢 怎么解决

Question

类似于一个模糊搜索的功能 从几万条中查找 速度慢 要20s往上 怎么解决

Answer 1

正常情况下都是交给后端处理，但我就喜欢挑战不可能。
如果你的需求非要前端处理，以下方案可供尝试：
假设要查询的数据为用户名，前端有10000条用户名数据，不要全部放进一个一维数组里。
根据名字拼音首字母，做成如下形式：

var nameArr = [
  {
    firstName:'A',
    list:['爱新觉罗','哀绿'...]
  },
  {
    firstName:'B',
    list:['保罗','波塞东'...]
  }
  ...
]

此时最外围数组只有26项（即26个首字母）
监听输入框获取焦点后，添加键盘按键监听事件，判断按下的第一个字母，进行一次检索，定位到数组内对应的首字母，定义个变量储存。
点击查询时，直接从该首字母的list数组中检索。
假设总数据10000条，分成26项后，每个list平均只有385条数据。在385条数据中检索你输入框的内容，相信要比在10000条里搜索快得多！