当前位置:网站首页>JS从扁平array转tree
JS从扁平array转tree
2022-08-02 03:34:00 【IICOOM】
有时我们需要从扁平的数组结构(flat array),根据id,和pid构建出树形数组结构(tree array),这种情形经常出现在嵌套的目录结构,如下图:

或者企业的部门架构,也会出现上面的类似结构。
类似上面的情景,假如我们有以下的数据:
let entries = [{
"id": "12",
"parentId": "0",
"text": "Man",
"level": "1",
"children": null
},
{
"id": "7",
"parentId": "12",
"text": "Other",
"level": "2",
"children": null
},
{
"id": "8",
"parentId": "7",
"text": "Bird",
"level": "3",
"children": null
},
{
"id": "9",
"parentId": "0",
"text": "Woman",
"level": "1",
"children": null
},
{
"id": "11",
"parentId": "9",
"text": "Girl",
"level": "2",
"children": null
}
];
我们期待通过一个算法,构建出下面的结构:
[
{
"id": "12",
"parentId": "0",
"text": "Man",
"level": "1",
"children": [
{
"id": "7",
"parentId": "12",
"text": "Other",
"level": "2",
"children": [
{
"id": "8",
"parentId": "7",
"text": "Bird",
"level": "3",
"children": []
}
]
}
]
},
{
"id": "9",
"parentId": "0",
"text": "Woman",
"level": "1",
"children": [
{
"id": "11",
"parentId": "9",
"text": "Girl",
"level": "2",
"children": []
}
]
}
]
也许我们可以想到,在遍历数组的时候使用递归。没错可以解决问题,但是这种方式并不高效。
最近,在Stack Overflow上看到一个方法,感觉不错,贴出来分享一下:
function list_to_tree(list) {
var map = {
}, node, roots = [], i;
for (i = 0; i < list.length; i += 1) {
map[list[i].id] = i; // initialize the map
list[i].children = []; // initialize the children
}
for (i = 0; i < list.length; i += 1) {
node = list[i];
if (node.parentId !== "0") {
// if you have dangling branches check that map[node.parentId] exists
list[map[node.parentId]].children.push(node);
} else {
roots.push(node);
}
}
return roots;
}
算法的复杂度是Θ(n log(n))。
如果使用递归,那么复杂度是Θ(n^2)。如果数据集比较大,那么执行的时间会很长。
边栏推荐
- idea中创建jsp项目详细步骤
- GM7150,振芯科技,视频解码器,CVBS转BT656/601,QFN32,替换TVP5150/CJC5150
- Personal image bed construction based on Alibaba Cloud OSS+PicGo
- Lightly 支持 Markdown 文件在线编写(文中提供详细 Markdown 语法)
- MPU6050 accelerometer and gyroscope sensor is connected with the Arduino
- IoT solution
- 联阳IT66121FN提供SDI转HDMI方案分享
- uniCloud use
- IDEA2021.2安装与配置(持续更新)
- DMA相应外设映射
猜你喜欢
随机推荐
Comparative analysis of mobile cloud IoT pre-research and Alibaba Cloud development
【LeetCode】Merge
振芯科技GM8285C:功能TTL转LVDS芯片简介
DMA相应外设映射
HAL库笔记——通过按键来控制LED(基于正点原子STM32F103ZET6精英板)
字符串哈希
剑指Offer 32.Ⅰ从上到下打印二叉树
剑指Offer 32.Ⅲ从上到下打印二叉树
MQ-5 combustible gas sensor interface with Arduino
Chrome 里的小恐龙游戏是怎么做出来的?
【LeetCode】链表相加 进位
【plang1.4.3】语言新特性:集合
MIPI解决方案 ICN6202:MIPI DSI转LVDS转换芯片
学习(四):显示FPS,和自定义显示调试
Pylon CLI 低成本的本地环境管控工具应用实例
进程(中):进程状态、进程地址空间
idea中创建jsp项目详细步骤
【详解】线程池及其自定义线程池的实现
LL(1)文法 :解决 if-else/if-else 产生式二义性问题
字符串匹配(蛮力法+KMP)








