V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
coolicer
V2EX  ›  JavaScript

js 怎么生成树结构,算法太烂

  •  
  •   coolicer · 2015-06-16 12:25:07 +08:00 · 7431 次点击
    这是一个创建于 3438 天前的主题,其中的信息可能已经有所发展或是发生改变。
    var arr = [
        {id:1, pid:0, name:"SYSTEM"},
        {id:2, pid:1, name:"aa"},
        {id:3, pid:2, name:"aaa"},
        {id:4, pid:2, name:"b"},
        {id:5, pid:0, name:"c"},
        {id:6, pid:5, name:"cc"}
    ];
    
    
    /*
    var result = [{
            "name": "SYSTEM",
            "expanded": true,
            "id": 0,
             "items": [
                       {
                            name: "Sub",
                           "expanded": true,
                            "id":1,
                           "pid":0,
                           "items":[ ......]
                       },
                       {}
     } ];
    */
    

    遇到这样的就傻眼了,99

    35 条回复    2015-06-17 22:15:22 +08:00
    Jaylee
        1
    Jaylee  
       2015-06-16 12:33:50 +08:00
    你在说啥?
    coolicer
        2
    coolicer  
    OP
       2015-06-16 12:36:02 +08:00
    @Jaylee

    ```js
    生成这样的结构
    var datasource = [{
    "text": "null",//根节点
    "expanded": true,
    "items": [
    {
    "text":"user1",//第一个子菜单
    "expanded": true,
    "items":[
    {
    "text":"user2",//二级菜单
    "expanded": true,
    "items":[
    {
    "text":"user4",//三级
    "items":[
    {
    "text":"user5"//四级
    }
    ]
    }
    ]
    },
    {
    "text":"user3",
    }
    ]
    },
    ]
    }];
    ```
    imn1
        3
    imn1  
       2015-06-16 12:37:10 +08:00
    这个事情就不要在前端做了,除非是用nodejs
    sneezry
        4
    sneezry  
       2015-06-16 12:37:11 +08:00 via iPhone   ❤️ 1
    楼主,看你的意思好像不知道js里树应该怎么写出来吗~不用这么搞,js里其实也有指针,对象和数组直接引用就是指针。爪机打字太费事,一会给楼主个例子。
    coolicer
        5
    coolicer  
    OP
       2015-06-16 12:37:11 +08:00
    coolicer
        6
    coolicer  
    OP
       2015-06-16 12:38:12 +08:00
    @sneezry 差不多吧,没搞过。问过一些都不懂,好失望
    coolicer
        7
    coolicer  
    OP
       2015-06-16 12:38:56 +08:00
    @imn1 没办法,业务分给前端做。还要自己写存储过程拿结果。
    Septembers
        8
    Septembers  
       2015-06-16 12:48:15 +08:00 via Android   ❤️ 1
    Septembers
        9
    Septembers  
       2015-06-16 12:55:32 +08:00 via Android
    @imn1 为什么不利用 桌面 过剩的算力?
    (如果前端渣,导致阻塞的话那另说
    coolicer
        10
    coolicer  
    OP
       2015-06-16 13:01:14 +08:00
    @Septembers 有点叼哦。5行。
    coolicer
        11
    coolicer  
    OP
       2015-06-16 13:02:43 +08:00
    @Septembers 额,我看看怎么转成 js.
    Septembers
        12
    Septembers  
       2015-06-16 13:04:10 +08:00 via Android
    @coolicer 自己移植下 完事
    loading
        13
    loading  
       2015-06-16 13:06:10 +08:00 via Android
    @Septembers 前几天也写文件管理也遇到目录树传到前端,参考下重构下自己的代码。
    Septembers
        14
    Septembers  
       2015-06-16 13:07:34 +08:00 via Android   ❤️ 1
    @coolicer 找参考实现别死盯着目标语言,有时候找找其他的语言的 移植过来用也不错
    czheo
        15
    czheo  
       2015-06-16 13:08:45 +08:00   ❤️ 2
    imn1
        16
    imn1  
       2015-06-16 13:14:50 +08:00
    @Septembers
    浏览器是有对脚本运行时间限制的,一般人不会调这个,起码我也是只知道firefox怎么调
    如果太多脚本、或者运算时间长,页面就会卡住(引擎好的会报错),用户体验就差了
    前端首先要考虑低端配置的客户端,而不是认为客户端必然有“富余”
    czheo
        17
    czheo  
       2015-06-16 13:18:18 +08:00
    @imn1 你叫react那种把整个dom做成virtual dom的怎么整
    sneezry
        18
    sneezry  
       2015-06-16 13:25:18 +08:00
    @czheo 同学写的非常好了,我就不写了 :P
    oxyflour
        19
    oxyflour  
       2015-06-16 13:27:04 +08:00   ❤️ 1
    https://gist.github.com/oxyflour/a90ecc4616587997c950

    核心函数只要三行(然而你需要支持 es6 语法的环境,比如最新的 firefox
    Septembers
        20
    Septembers  
       2015-06-16 13:29:19 +08:00 via Android
    @oxyflour 递归深度太深不会炸?
    imn1
        21
    imn1  
       2015-06-16 13:30:37 +08:00
    @czheo
    那要看用户群,反正我这台机不敢在浏览器乱按 F12
    iNaru
        22
    iNaru  
       2015-06-16 13:38:31 +08:00
    var temp = [];
    for(var i in arr){
    arr[i].expanded = true;
    var id = arr[i].pid - 1;
    (id in arr ? (arr[id].items || (arr[id].items = [])) : temp).push(arr[i])
    }
    console.log(temp);
    oxyflour
        23
    oxyflour  
       2015-06-16 13:41:01 +08:00
    @Septembers 会炸的(但是用 ff 试了,深度要到好几千呢,比如下面这个就不会炸
    tree(0, Array.apply(null, new Array(2048)).map((v, i) => { return {id:i+1, pid:i} }))
    iNaru
        24
    iNaru  
       2015-06-16 13:41:43 +08:00
    @iNaru 这个原数组会被污染,之前最好用克隆的数组进行。
    Septembers
        25
    Septembers  
       2015-06-16 13:48:00 +08:00 via Android
    @imn1

    1. 主流用户
    2. 高端用户 建立在主流之上满足用户
    3. 低端用户 建立在主流以下满足用户

    先满足主流
    如果 低端/主流 用户想得到 主流/高端 的体验请升级

    众口难调 某些用户喜欢在 低端位置 获取 高端体验 这样诉求只能是miss
    imn1
        26
    imn1  
       2015-06-16 13:59:57 +08:00   ❤️ 1
    @Septembers
    这个就不用跟我说了,我全职做市场调查超过5年,非全职市场分析超过20年
    skyler
        27
    skyler  
       2015-06-16 16:50:08 +08:00
    看看 jstree 找找灵感吧 XD
    br00k
        28
    br00k  
       2015-06-17 09:15:20 +08:00
    一般都是后端干好吧。
    mingzepeng
        29
    mingzepeng  
       2015-06-17 09:56:13 +08:00
    像js这种动态语言,生成树结构不要太方便啊
    mingzepeng
        30
    mingzepeng  
       2015-06-17 09:57:55 +08:00
    看错楼主的表达了,不好意思。
    coolicer
        31
    coolicer  
    OP
       2015-06-17 14:12:54 +08:00
    @czheo https://jsfiddle.net/6nk0mkm3/2/
    我加多一层就报错了?
    siroccoicode
        32
    siroccoicode  
       2015-06-17 14:28:05 +08:00
    @coolicer 你的用例中id、pid为字符串型,而作者代码判断条件使用===判断的数字型。作者代码中还有一个问题:如果原数组中id排序并非顺序,会出现parent在objMap取空的问题
    coolicer
        33
    coolicer  
    OP
       2015-06-17 14:36:22 +08:00
    @siroccoicode 谢谢提醒
    czheo
        34
    czheo  
       2015-06-17 18:55:07 +08:00 via iPhone
    @siroccoicode objMap的bug都看出来了,你真仔细。不像某些lz拿来主义
    coolicer
        35
    coolicer  
    OP
       2015-06-17 22:15:22 +08:00
    @czheo = = 我也有注意到全等,也是有转类型的,只是不知道为什么不行。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5730 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 42ms · UTC 03:25 · PVG 11:25 · LAX 19:25 · JFK 22:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.