js扁平数组转换树形结构

最新推荐文章于 2024-06-09 20:17:27 发布
最新推荐文章于 2024-06-09 20:17:27 发布
阅读量211 收藏
点赞数 1
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45153096/article/details/115488585
版权

下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
var tree= [
    {
        "id":1,
        "name":"个人档案",
        "code":"personal",
        "sort_index":1,
        "parent_code":"",
        "create_time":1535622519220,
        "update_time":1535622519220,
        "create_user":1,
        "update_user":1,
        "url":"",
        "icon":"iconpaper_plane_fill",
        "target":"personalFrame"
    },
    {
        "id":5,
        "name":"监测",
        "code":"monitor",
        "sort_index":2,
        "parent_code":"",
        "create_time":1535622519344,
        "update_time":1535622519344,
        "create_user":1,
        "update_user":1,
        "url":"",
        "icon":"iconxitong",
        "target":"monitorFrame"
    },
    {
        "id":10,
        "name":"应用管理",
        "code":"device",
        "sort_index":3,
        "parent_code":"",
        "create_time":1535622519470,
        "update_time":1535622519470,
        "create_user":1,
        "update_user":1,
        "url":"",
        "icon":"icon2-1peizhiguanli",
        "target":"deviceFrame"
    },
    {
        "id":16,
        "name":"业务管理",
        "code":"business",
        "sort_index":4,
        "parent_code":"",
        "create_time":1535622519612,
        "update_time":1535622519612,
        "create_user":1,
        "update_user":1,
        "url":"",
        "icon":"iconweibiaoti-4",
        "target":"businessFrame"
    },

    {
        "id":6,
        "name":"图表统计",
        "code":"chartStatistic",
        "sort_index":1,
        "parent_id":5,
        "parent_code":"monitor",
        "create_time":1535622519368,
        "update_time":1535622519368,
        "create_user":1,
        "update_user":1,
        "url":"/diagramInfo",
        "icon":"el-icon-ship",
        "target":""
    },
    {
        "id":43,
        "name":"连接异常",
        "code":"connarmrecord",
        "sort_index":2,
        "parent_id":27,
        "parent_code":"exception",
        "create_time":1535622519959,
        "update_time":1535622519959,
        "create_user":1,
        "update_user":1,
        "url":"/linkRecord",
        "icon":"el-icon-s-ticket",
        "target":""
    },
    {
        "id":8,
        "name":"数据监测",
        "code":"dataMonitor",
        "sort_index":3,
        "parent_id":5,
        "parent_code":"monitor",
        "create_time":1535622519417,
        "update_time":1535622519417,
        "create_user":1,
        "update_user":1,
        "url":"/platInfer",
        "icon":"el-icon-basketball",
        "target":""
    },
    {
        "id":30,
        "name":"下载历史数据",
        "code":"download",
        "sort_index":1,
        "parent_id":29,
        "parent_code":"count",
        "create_time":1535622520002,
        "update_time":1535622520002,
        "create_user":1,
        "update_user":1,
        "url":"/dataforms",
        "icon":"el-icon-s-open",
        "target":""
    },
    {
        "id":14,
        "name":"扩展属性",
        "code":"extend",
        "sort_index":4,
        "parent_id":10,
        "parent_code":"device",
        "create_time":1535622519558,
        "update_time":1535622519558,
        "create_user":1,
        "update_user":1,
        "url":"/extendSet",
        "icon":"el-icon-fork-spoon",
        "target":""
    },
    {
        "id":47,
        "name":"转发设置",
        "code":"forwarding",
        "sort_index":7,
        "parent_id":37,
        "parent_code":"sys",
        "create_time":1535622519959,
        "update_time":1535622519959,
        "create_user":1,
        "update_user":1,
        "url":"/forwarding",
        "icon":"el-icon-sell"
    },
    {
        "id":18,
        "name":"冰箱",
        "code":"fridge",
        "sort_index":2,
        "parent_id":16,
        "parent_code":"business",
        "create_time":1535622519684,
        "update_time":1535622519684,
        "create_user":1,
        "update_user":1,
        "url":"/refrigerator",
        "icon":"el-icon-coffee-cup",
        "target":""
    },
    {
        "id":23,
        "name":"网关路由",
        "code":"gateway",
        "sort_index":2,
        "parent_id":21,
        "parent_code":"eq",
        "create_time":1535622519790,
        "update_time":1535622519790,
        "create_user":1,
        "update_user":1,
        "url":"/gateway",
        "icon":"el-icon-s-order",
        "target":""
    },
    {
        "id":9,
        "name":"列表监测",
        "code":"gridMonitor",
        "sort_index":4,
        "parent_id":5,
        "parent_code":"monitor",
        "create_time":1535622519442,
        "update_time":1535622519442,
        "create_user":1,
        "update_user":1,
        "url":"/listingInfer",
        "icon":"el-icon-mobile-phone",
        "target":""
    },
    {
        "id":17,
        "name":"保温箱",
        "code":"incubator",
        "sort_index":1,
        "parent_id":16,
        "parent_code":"business",
        "create_time":1535622519646,
        "update_time":1535622519646,
        "create_user":1,
        "update_user":1,
        "url":"/incubator",
        "icon":"el-icon-tableware",
        "target":""
    },
    {
        "id":15,
        "name":"维护设置",
        "code":"maintain",
        "sort_index":5,
        "parent_id":10,
        "parent_code":"device",
        "create_time":1535622519576,
        "update_time":1535622519576,
        "create_user":1,
        "update_user":1,
        "url":"/maintainSet",
        "icon":"el-icon-refrigerator",
        "target":""
    },
    {
        "id":7,
        "name":"传感器监测配置",
        "code":"monitorInstance",
        "sort_index":2,
        "parent_id":5,
        "parent_code":"monitor",
        "create_time":1535622519398,
        "update_time":1535622519398,
        "create_user":1,
        "update_user":1,
        "url":"/inferInstance",
        "icon":"el-icon-wind-power",
        "target":""
    },
    {
        "id":13,
        "name":"监测区间",
        "code":"monitorRange",
        "sort_index":3,
        "parent_id":10,
        "parent_code":"device",
        "create_time":1535622519543,
        "update_time":1535622519543,
        "create_user":1,
        "update_user":1,
        "url":"/detection",
        "icon":"el-icon-truck",
        "target":""
    },
    {
        "id":48,
        "name":"MQTT连接设置",
        "code":"mqttManager",
        "sort_index":8,
        "parent_id":37,
        "parent_code":"sys",
        "create_time":1535622519959,
        "update_time":1535622519959,
        "create_user":1,
        "update_user":1,
        "url":"/mqtt",
        "icon":"el-icon-guide"
    },
    {
        "id":35,
        "name":"系统日志",
        "code":"noticelog",
        "sort_index":1,
        "parent_id":34,
        "parent_code":"log",
        "create_time":1535622520158,
        "update_time":1535622520158,
        "create_user":1,
        "update_user":1,
        "url":"/notification",
        "icon":"el-icon-c-scale-to-original",
        "target":""
    },
    {
        "id":36,
        "name":"操作日志",
        "code":"operatelog",
        "sort_index":2,
        "parent_id":34,
        "parent_code":"log",
        "create_time":1535622520183,
        "update_time":1535622520183,
        "create_user":1,
        "update_user":1,
        "url":"/operationlog",
        "icon":"el-icon-document-copy",
        "target":""
    },
    {
        "id":44,
        "name":"网关断电异常",
        "code":"outagearmrecord",
        "sort_index":3,
        "parent_id":27,
        "parent_code":"exception",
        "create_time":1535622519959,
        "update_time":1535622519959,
        "create_user":1,
        "update_user":1,
        "url":"/outageRecord",
        "icon":"el-icon-s-management",
        "target":""
    },
    {
        "id":39,
        "name":"参数设置",
        "code":"param",
        "sort_index":2,
        "parent_id":37,
        "parent_code":"sys",
        "create_time":1535622520265,
        "update_time":1535622520265,
        "create_user":1,
        "update_user":1,
        "url":"/paramsetup",
        "icon":"el-icon-attract",
        "target":""
    },
    {
        "id":2,
        "name":"修改个人资料",
        "code":"personalinfo",
        "sort_index":1,
        "parent_id":1,
        "parent_code":"personal",
        "create_time":1535622519250,
        "update_time":1535622519250,
        "create_user":1,
        "update_user":1,
        "url":"/material",
        "icon":"el-icon-user",
        "target":""
    },
    {
        "id":3,
        "name":"修改密码",
        "code":"personalpwd",
        "sort_index":2,
        "parent_id":1,
        "parent_code":"personal",
        "create_time":1535622519276,
        "update_time":1535622519276,
        "create_user":1,
        "update_user":1,
        "url":"/cipher",
        "icon":"el-icon-s-tools",
        "target":""
    },
    {
        "id":45,
        "name":"接口管理",
        "code":"queryInterface",
        "sort_index":6,
        "parent_id":37,
        "parent_code":"sys",
        "create_time":1535622519959,
        "update_time":1535622519959,
        "create_user":1,
        "update_user":1,
        "url":"/portadmin",
        "icon":"el-icon-files",
        "target":""
    },
    {
        "id":20,
        "name":"冷库",
        "code":"refrigeratory",
        "sort_index":4,
        "parent_id":16,
        "parent_code":"business",
        "create_time":1535622519719,
        "update_time":1535622519719,
        "create_user":1,
        "update_user":1,
        "url":"/refrigeratory",
        "icon":"el-icon-s-cooperation",
        "target":""
    },
    {
        "id":33,
        "name":"角色权限",
        "code":"roleright",
        "sort_index":2,
        "parent_id":31,
        "parent_code":"account",
        "create_time":1535622520090,
        "update_time":1535622520090,
        "create_user":1,
        "update_user":1,
        "url":"/userLimits",
        "icon":"el-icon-share",
        "target":""
    },
    {
        "id":11,
        "name":"架构",
        "code":"scene",
        "sort_index":1,
        "parent_id":10,
        "parent_code":"device",
        "create_time":1535622519501,
        "update_time":1535622519501,
        "create_user":1,
        "update_user":1,
        "url":"/architecture",
        "icon":"el-icon-bicycle",
        "target":""
    },
    {
        "id":22,
        "name":"传感器",
        "code":"sensor",
        "sort_index":1,
        "parent_id":21,
        "parent_code":"eq",
        "create_time":1535622519754,
        "update_time":1535622519754,
        "create_user":1,
        "update_user":1,
        "url":"/sensor",
        "icon":"el-icon-s-cooperation",
        "target":""
    },
    {
        "id":42,
        "name":"传感器配置",
        "code":"sensorConfig",
        "sort_index":5,
        "parent_id":37,
        "parent_code":"sys",
        "create_time":1535622520342,
        "update_time":1535622520342,
        "create_user":1,
        "update_user":1,
        "url":"/sensorsetup",
        "icon":"el-icon-data-analysis",
        "target":""
    },



];

JavaScript。

// A code block
var foo = 'bar';

    this.arrayToTree(tree)
    arrayToTree(array) {
      var map = {} //存着每一个层级的引用，以id为key，方便查找
      var treeList= []
      for (var i = 0; i < array.length; i++) {
        var obj = array[i]
        var clone = JSON.parse(JSON.stringify(obj))

        // 判断没有parent_id 属性的是一级父节点
        if (obj.parent_id == undefined) {
          result.push(clone)
        }
        map[clone.id] = clone
        if (map[clone.parent_id]) {
          if (!map[clone.parent_id].children) map[clone.parent_id].children = []
          map[clone.parent_id].children.push(clone)
       
        }
      }
      return treeList
    },
码到功成996
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
「js」扁平数据结构转树形数据结构
chen_zhuo_you的博客
10-30 3355
将平铺的数组结构转成树形结构 初始数据如下： const list = [ { id: 1, name: '司令', pid: 0 }, { id: 2, name: '军长', pid: 1 }, { id: 3, name: '副军长', pid: 1 }, { id: 4, name: '旅长', pid: 3 }, { id: 5, name: '团长', pid: 4 }, ] 方法一： function arrToTree(list) { .
扁平数组转换为树状结构
laoli360的博客
10-30 2258
本文代码只是一个例子. const data = [ {id:"01", name: "张大大", pid:"", job: "项目经理"}, {id:"02", name: "小亮", pid:"01", job: "产品leader"}, {id:"03", name: "小美", pid:"01", job: "UIleader"}, {id:"04", name: "老马", pid:"01", job: "技术leader"}, {id:"05", name: "老
js处理扁平数组和树结构相互转换
qq_40596257的博客
12-02 2533
js处理扁平数组和树结构相互转换
JavaScript 将扁平的数组输出转为树形结构(需要考虑性能)
程邓楠的博客
02-27 2150
判断一个算法的好坏，一般从执行时间和占用空间来看,执行时间越短，占用的内存空间越小，那么它就是好的算法。对应的，我们常常用时间复杂度代表执行时间，空间复杂度代表占用的内存空间。
js实现扁平数据转化成树结构数据
前端-尔嵘
05-27 1699
以上是四种不同的 JavaScript 实现将扁平数据转化为树结构数据的示例代码。这些实现方法都有其各自的优缺点，具体使用要根据实际场景进行选择。使用递归和 reduce 结合实现。使用 reduce 实现。
js数组转树形结构
我们明天会更好的博客
06-06 4415
// 列表组装成树形数据算法 function buildListToTree (list, parentId="parentId", Id="Id", rootId="00000000-0000-0000-0000-00000000000a") { let arr = [...list]; let rootList = arr.filter((item) => { if ...
js数组转为树形结构及树形结构数据扁平化.md
08-08
js数组转为树形结构 树形结构数据扁平化
把扁平化的数据转换成树形结构的JSON
08-12
把扁平化的数据转换成树形结构的JSON
javascript将扁平的数据转为树形结构的高效率算法
10-15
主要介绍了javascript将扁平的数据转为树形结构的高效率算法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Java 将有父子关系的数据转换成树形结构数据
01-07
一、数据库父子结构数据设计  大部分采用 parentId的形式来存储父id，并且只存储父id，祖父Id不存储。也可以添加存储层级级别或者层级关系等字段。 CREATE TABLE `t_resource` ( `id` varchar(255) NOT NULL ...
js代码-扁平化树形结构数据
07-16
js代码-扁平化树形结构数据
扁平数组和树形结构互相转化
油墨香^-^的博客
04-11 994
扁平数组转树形结构可以通过递归实现，但是为了实现时间复杂度、空间复杂度最优，该选用什么方法呢。
关于扁平数组转树型数组这件事
qq_53847322的博客
11-18 888
关于扁平数组转树型数组这件事，如何优化递归，如何使用递归实现扁平数组转树型数组。如何使用对象的形式来实现扁平数组转树型数组
js中扁平数据与树形数据之间的转换
fangqi20170515的博客
07-07 2943
扁平转树形: link 思路 ( 递归方法 )： 1、申明一个Map对象，pid，outputObj三个变量 2、循环数组，取出每个对象对应的pid 3、判断对应的pid是否已经存在Map中，如果存在，判断childrens属性是否存在，不存在，创建一个childrens属性; 将当前对象克隆到一个新对象，加入到childrens中。并且，将当前对象的id加入到Map中(重点) 4、判断pid不在Map中存在，并且pid为0；创建一个新的对象，且将id存入Map中.........
扁平数组与树形数组的相互转换（详例 & 代码）
qq_53322872的博客
06-01 640
树形数组与扁平数组的相互转换
JS中的扁平化数据转换为树形结构数组
Lily的博客
07-05 512
【代码】JS中的扁平化数据转换为树形结构数组。
算法 ——平扁数组转树（1）
meng_xiaoxiao的博客
07-24 227
children和originChildren是引用类型，引用类型的特点就是指向同一个引用地址的变量，无论是哪一个修改了数据源，他们获取到的数据都是保持一致；2、遍历父节点找孩子，如果找到孩子就把孩子放到父节点children属性的数组中。1、将数组分成两类，父节点和子节点，parent,originChildren。调用console.log(toTree(arr));3、通过递归将让子节点去找它的下级子节点。............
[Vue-常见错误]浏览器显示Uncaught runtime errors
最新发布
一个喜欢什么都研究一下的小小后端程序员
06-09 350
在vue.config.js中配置关闭Uncaught runtime errors显示。
js 扁平化数组转树结构对象
05-17
扁平化数组转树结构对象是一种常见的数据处理方式，在 JavaScript 中可以通过递归来实现。具体步骤如下： 1. 首先对扁平化数组进行排序，以保证每个父节点在子节点之前处理。 2. 通过递归，遍历整个扁平化数组。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值