将数组的列表结构转成树结构

感觉每天都带着口罩上班好奇怪

哈哈！！

他们带我也带

在后端返回的数据式中，以以下格式存储信息是相当普遍的，尤其是在存在一对多父/子节点关系的情况下：

const data = [

{ id: 56, parentId: 62 },

{ id: 81, parentId: 80 },

{ id: 74, parentId: null },

{ id: 76, parentId: 80 },

{ id: 63, parentId: 62 },

{ id: 80, parentId: 86 },

{ id: 87, parentId: 86 },

{ id: 62, parentId: 74 },

{ id: 86, parentId: 74 },

];

那么，如何从这种对象数组格式转变为分层树格式？

{

id: 74,

parentId: null,

children: [

{

id: 62,

parentId: 74,

children: [{ id: 56, parentId: 62 }, { id: 63, parentId: 62 }],

{

id: 86,

parentId: 74,

children: [

{

id: 80,

parentId: 86,

children: [{ id: 81, parentId: 80 }, { id: 76, parentId: 80 }],

{ id: 87, parentId: 86 },

};

数组中的每个元素都是一个“节点”。一个节点可以是多个节点的“父级”，也可以是一个节点的“子级”。在下面的图片，86是80和87的“父”。74的“孩子” 是86。我们树的顶部节点是“根”。

要构建我们的树，我们将要：

遍历data数组

查找当前元素的父元素

在父元素的对象中，添加对子元素的引用

如果某个元素没有父元素，那么我们知道这将是树的“根”元素

首先保存对应关系，方便我们通过儿子可以快速找到父亲。

const idMapping = data.reduce((acc, el, i) => {

acc[el.id] = i;

return acc;

}, {});

通过对象是引用类型的机制我们可以这样创建树结构。

let root;

data.forEach(el => {

// 根节点

if (el.parentId === null) {

root = el;

return;

}

// 父节点

const parentEl = data[idMapping[el.parentId]];

// 子节点

parentEl.children = [...(parentEl.children || []), el];

});

当您利用JavaScript对象引用时，这实际上变得相当容易。无需递归即可在O（n）时间内完成。

将数组的列表结构转成树结构相关推荐

【黑马程序员 C++教程从0到1入门编程】【笔记1】数据类型、运算符、程序流程结构、数组、函数、指针、结构体
黑马程序员匠心之作|C++教程从0到1入门编程,学习编程不再难文章目录 1.C++初识 1.1 第一个c++程序 1.2 注释 1.3 变量 1.4 常量 1.5 关键字 1.6 标识符命名规则 2 ...
C++阶段01笔记汇总【C++软件安装、C++初识、数据类型、运算符、程序流程结构、数组、函数、指针、结构体】
C++| 匠心之作从0到1入门学编程[视频+课件+笔记+源码] 目录 C++课程安排 1 C++初识 1.1 第一个C++程序 1.1.1 创建项目 1.1.2 创建文件 1.1.3 编写代码 1. ...
c/c++教程 - 1.10 结构体使用typedef定义struct结构体结构体数组结构体指针结构体嵌套结构体做函数参数结构体const
十二.结构体 (1)结构体定义和使用基本概念:结构体属于用户自定义的数据类型,允许用户存储不同的数据类型. 参考视频:https://www.bilibili.com/video/BV1et411b ...
C++ 基础入门之结构体/结构体定义和使用/结构体数组/结构体指针/ 结构体嵌套结构体/结构体做函数参数/结构体中 const 使用场景/结构体案例
C++ 基础入门之结构体/结构体定义和使用/结构体数组/结构体指针/ 结构体嵌套结构体/结构体做函数参数/结构体中 const 使用场景/结构体案例目录一.简单介绍二.结构体定义和使用三. ...
C语言中的结构体，结构体中数组初始化与赋值
最近写c语言中的结构体遇到了些问题,从网上找了些资料如下: 结构体是连续存储的,但由于结构体中成员类型各异,所以会存在内存对齐问题,也就是内存里面会有空档,具体的对齐方式这里暂不讨论: 1.结构体的 ...
【结构体】结构体引用、结构体数组指针、包含结构的结构体
目录一.概念.变量的定义初识结构体结构体变量的定义.引用结构体类型的初始化二.结构体的数组认识结构体数组初始化结构体数组三.结构体指针初识结构体指针指向结构体数组的指针结构体作为函 ...
【C++】结构体 - 定义和使用，结构体数组，结构体指针，结构体嵌套结构体，结构体做函数参数，结构体 const
文章目录 1. 定义和使用 2. 结构体数组 3. 结构体指针 4. 结构体嵌套结构体 5. 结构体做函数参数 6. 结构体 const 1. 定义和使用结构体属于用户自定义的数据类型,允许用户存储 ...
c++结构体总结（结构体定义，结构体数组，结构体指针，结构体嵌套结构体，结构体做函数参数,结构体中 const使用场景）
看完b站黑马程序员之后的借鉴和笔记 1.什么是结构体,有什么作用? 在C/C++中,结构体是用户定义的数据类型.它可以把几种不同类型的数据项集合成结构体这样一个单一类型. 2. 结构体定义和使用 #i ...
C++结构体结构体定义和使用、结构体数组、结构体指针、结构体嵌套结构体、结构体做函数参数
C++结构体第二章 C++结构体 1.结构体定义和使用语法:struct 结构体名 { 结构体成员列表 }: 通过结构体创建变量的方式有三种: struct 结构体名变量名 struct 结构体 ...

将数组的列表结构转成树结构

将数组的列表结构转成树结构相关推荐

最新文章

热门文章