前端如何去快速处理比较大的数据? 头发都快薅光了

This topic created in 2500 days ago, the information mentioned may be changed or developed.

现在有这么个需求, 在一个 josn 中找到 name 所在位置

[
  {
    大量各种其他不相关属性,
    children: [
      {
        name: '',
        大量各种其他不相关属性
      }
    ]
  },
  ...
]

怎么去通过模糊匹配 name 去获得这两层的 index

数据很大, 有几 M;
第一层与第二层可能都 0 有几百条;
实时更新的, 所以无法通过先初始化一个 hash 表来查 Index;

怎么让获得 index 的时间尽量短? 因为需要查找的 name 是通过 input 输入的, 一边输入, 一边不停去匹配查找!

目前已经掉了很多头发, 请各位帮帮我埼玉!

ps: 如果需求没有表达明确, 请帮忙指正哦

Supplement 1 · Aug 5, 2019

感谢各位的帮助, 最后选择了 https://fusejs.io/ 这个库, 2.9M 的数据, 查找也只需要 52ms

name

index

查找

属性

16 replies • 2019-08-05 11:01:52 +08:00

AreYou0k

Aug 2, 2019

webWoker 好像可以

getBugTOyou

Aug 2, 2019

@AreYou0k webWorker 只是提供了个线程呀, 关键是计算耗时!

orcusfox

Aug 2, 2019

用了 map 和 reduce ？

zachgenius

Aug 2, 2019

大量数据交给前端处理....总觉得是后端偷懒呢...

oatw

Aug 2, 2019

貌似是一道算法题呀。输入的事件用 setTimeout 处理，几百条乘以几百条那就是最大 10 万条？！

先快速排序再二分查找？

wszgrcy

Aug 2, 2019 via Android

上堆，(嗯，应该没错)尽量别递归

rain0002009

Aug 2, 2019

所以你们服务端是把所有的数据都给你了然后叫你自己做模糊搜索？
你们服务端 666 啊
搜了一下还真有模糊搜索的轮子
https://fusejs.io/

yhxx

Aug 2, 2019

转成字符串，然后查相邻的{}或者[]的 index ？

loading

Aug 2, 2019 via Android

这是一个 js 的题目，node.js 后端也会遇到。

TrickWu

Aug 2, 2019

按照我个人理解，这种上 M 的数据应该是后端检索来做的，前端浏览器的速度怎么可能跟服务器比呢。

nigelvon

Aug 2, 2019

没毛病确实应该后端做，数据量不大后端可以翻转一下把 name 的值变成 key 这样速度比较快，如果很大可以借助其他工具做索引来搜索。

nondanee

Aug 2, 2019

应该要 parse 的吧？那可以用 reviver 建个索引
```
let mapping = {}
JSON.parse(responseText, (k, v) => {
if(!isNaN(k)){
v.i = k
}
if(typeof(v) == "object" && 'children' in v){
v.children.forEach((child, i) => mapping[child.name] = v.i + '-' + i)
}
return v
})
```

ChefIsAwesome

Aug 2, 2019

“因为需要查找的 name 是通过 input 输入的, 一边输入, 一边不停去匹配查找!”
这肯定后端搞啊，前端搞这个直接卡死了。

ipwx

Aug 2, 2019 via Android

前端对数据建树或其他合适的数据结构，后端新的数据增量给出，那么前端后续就能更新这个数据结构而不是全部重建。数据结构请查询各种模糊匹配算法

ipwx

Aug 2, 2019 via Android

我觉得这个前段做挺有道理的，减轻服务器压力。反正和数据安全性关系不大

getBugTOyou

Aug 5, 2019

@rain0002009 感谢, 很好用! 开始用这个库了