资讯专栏INFORMATION COLUMN

js “指针”:数组转树

mikyou / 409人阅读

摘要:当变量指向一个对象的时候,实际指向的是存储地址测试结果数组转树的方式节点节点节点节点节点节点节点节点将作为键值方便二次遍历做索引为的是根节点这样只要遍历俩次第一次遍历将数组转节点对象,存储到新的对象里,为键值方便索引第二次遍历根据索引插入子

当变量指向一个对象的时候,实际指向的是存储地址
测试:

    a = {val: 123}
    b = a
    b.val = 321
    console.log(a)
    // 结果:{val: 321}

数组转树的方式:

    arr = [
        {id: 1, name: "节点1", pid: 0},
        {id: 2, name: "节点2", pid: 1},
        {id: 3, name: "节点3", pid: 1},
        {id: 4, name: "节点4", pid: 2},
        {id: 5, name: "节点5", pid: 1},
        {id: 6, name: "节点6", pid: 3},
        {id: 7, name: "节点7", pid: 4},
        {id: 8, name: "节点8", pid: 2}
    ];
    function node(d){
        return {
            name: d.name,
            id: d.id,
            pid: d.pid,
            children: []
        }
    }
    function tree(arr){
        var narr = {};
        for (var i in arr) { // 将id作为键值方便二次遍历做索引
            narr[arr[i].id] = node(arr[i]);
        }
        for (var j in narr) {
            if(typeof narr[narr[j].pid] != "undefined"){
                narr[narr[j].pid].children.push(narr[j])
            }
        }
        return narr[1]  // id为1的是根节点
    }
    console.log(tree(arr))

这样只要遍历俩次
第一次遍历将数组转节点对象,存储到新的对象里,id为键值方便索引
第二次遍历根据索引插入子节点

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103135.html

相关文章

  • 列表转树的实现思路与代码

    摘要:执行步骤遍历每一个列表项,对比该项与列表内所有项的,根据对比结果做后续处理如果该项与列表中某项相等,那么把作为的孩子。这里应该还有可优化的地方,欢迎大家提供更多更好的思路,恳请在补充新的方案时,先把思路说清楚,切勿直接扔代码上来。 背景 在前端开发中,有一种组件是每个前端都绕不过去的,树组件。在业务中像目录结构、组织架构、行政区域划分这些都是典型的树组件使用场景。一般来说,前端也就是拿...

    starsfun 评论0 收藏0
  • 轻松实现可扩展的树形表格

    摘要:由于目前还未开发树形表格组件,也参阅了网络上部分基于表格封装的开源树形组件,都没有找的太理想可进行二次开发的开源项目,所以就萌生了自行开发树形表格。 由于ElementUI目前还未开发树形表格组件,也参阅了网络上部分基于ElementUI表格封装的开源树形组件,都没有找的太理想可进行二次开发的开源项目,所以就萌生了自行开发树形表格。 本示例提供开发思路,移除了多余的样式,比较适合新手入...

    harryhappy 评论0 收藏0
  • 树转列表的实现思路与代码

    摘要:背景之前写了一篇列表转树的文章,有列表转树的需求自然就会有树转列表的需求,这里我把树转列表的思路与代码再整理一下。总结树转列表过程中,我这里的深度优先采用了递归方式,可能会对内存占用较多,使用时请自行权衡。 背景 之前写了一篇列表转树的文章,有列表转树的需求自然就会有树转列表的需求,这里我把树转列表的思路与代码再整理一下。 思路分析 需求是什么?老规矩,上图showImg(https:...

    denson 评论0 收藏0
  • javascript递归

    摘要:调用自身的函数称为递归函数缺点递归占用的内存和资源比较多,同时难以实现和维护。优点在处理之类的树形结构数据时,非常适合用递归。案例数字的阶乘通过乘以进行计算获取存在某个字段的节点某个数或者递归实现数组转树结构调用 调用自身的函数称为递归函数 缺点:递归占用的内存和资源比较多,同时难以实现和维护。 优点:在处理DOM之类的树形结构数据时,非常适合用递归。 案例 数字 n 的阶乘通过乘...

    terro 评论0 收藏0
  • PHP: array数组常用API

    摘要:语法数组删除数组的最后一项语法数组在数组的最末添加一项语法数组删除数组的首项语法数组在数组的首部添加一项案例分析 1:数组的指针操作: 语法:current(数组) 当前指针指向的单元值(默认是第零个)语法 next(数组) 当前指针往下移动一帧语法 prev(数组) 当前指针往前移动一个指针语法 end(array) 将当前指针移动到最后一项语法 ...

    Cheriselalala 评论0 收藏0

发表评论

0条评论

mikyou

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<