V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
getBugTOyou
V2EX  ›  算法

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

  •  
  •   getBugTOyou · 2019-08-02 17:11:03 +08:00 · 3693 次点击
    这是一个创建于 1940 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

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

    第 1 条附言  ·  2019-08-05 11:08:18 +08:00
    感谢各位的帮助, 最后选择了 https://fusejs.io/ 这个库, 2.9M 的数据, 查找也只需要 52ms
    16 条回复    2019-08-05 11:01:52 +08:00
    AreYou0k
        1
    AreYou0k  
       2019-08-02 17:15:52 +08:00
    webWoker 好像可以
    getBugTOyou
        2
    getBugTOyou  
    OP
       2019-08-02 17:19:03 +08:00
    @AreYou0k webWorker 只是提供了个线程呀, 关键是计算耗时!
    napsterwu
        3
    napsterwu  
       2019-08-02 17:23:53 +08:00
    用了 map 和 reduce ?
    zachgenius
        4
    zachgenius  
       2019-08-02 17:27:18 +08:00
    大量数据交给前端处理....总觉得是后端偷懒呢...
    oatw
        5
    oatw  
       2019-08-02 17:27:26 +08:00
    貌似是一道算法题呀。输入的事件用 setTimeout 处理,几百条乘以几百条那就是最大 10 万条?!

    先快速排序再二分查找?
    wszgrcy
        6
    wszgrcy  
       2019-08-02 17:27:39 +08:00 via Android
    上堆,(嗯,应该没错)尽量别递归
    rain0002009
        7
    rain0002009  
       2019-08-02 18:04:57 +08:00   ❤️ 1
    所以你们服务端是把所有的数据都给你了 然后叫你自己做模糊搜索?
    你们服务端 666 啊
    搜了一下 还真有模糊搜索的轮子
    https://fusejs.io/
    yhxx
        8
    yhxx  
       2019-08-02 18:29:27 +08:00
    转成字符串,然后查相邻的{}或者[]的 index ?
    loading
        9
    loading  
       2019-08-02 18:40:15 +08:00 via Android
    这是一个 js 的题目,node.js 后端也会遇到。
    TrickWu
        10
    TrickWu  
       2019-08-02 18:43:54 +08:00
    按照我个人理解,这种上 M 的数据应该是后端检索来做的,前端浏览器的速度怎么可能跟服务器比呢。
    nigelvon
        11
    nigelvon  
       2019-08-02 18:48:54 +08:00
    没毛病确实应该后端做,数据量不大后端可以翻转一下把 name 的值变成 key 这样速度比较快,如果很大可以借助其他工具做索引来搜索。
    nondanee
        12
    nondanee  
       2019-08-02 20:10:14 +08:00
    应该要 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
        13
    ChefIsAwesome  
       2019-08-02 21:12:52 +08:00
    “因为需要查找的 name 是通过 input 输入的, 一边输入, 一边不停去匹配查找!”
    这肯定后端搞啊,前端搞这个直接卡死了。
    ipwx
        14
    ipwx  
       2019-08-02 22:03:06 +08:00 via Android
    前端对数据建树或其他合适的数据结构,后端新的数据增量给出,那么前端后续就能更新这个数据结构而不是全部重建。数据结构请查询各种模糊匹配算法
    ipwx
        15
    ipwx  
       2019-08-02 22:03:43 +08:00 via Android
    我觉得这个前段做挺有道理的,减轻服务器压力。反正和数据安全性关系不大
    getBugTOyou
        16
    getBugTOyou  
    OP
       2019-08-05 11:01:52 +08:00
    @rain0002009 感谢, 很好用! 开始用这个库了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2795 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 13:18 · PVG 21:18 · LAX 05:18 · JFK 08:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.