js list to tree

在JavaScript中,将列表转换为树结构是一种常见的操作,尤其是在处理需要层级展示的数据,如菜单、分类等。这通常涉及到递归函数和对象的引用。以下是一个简单的例子,展示了如何将一个扁平化的列表转换为多层级树结构。
假设我们有以下这样的列表,每个节点有一个 `id` 和一个 `parentId`,表示它的父节点的ID:

const list = [{ id: 1, parentId: null },{ id: 2, parentId: 1 },{ id: 3, parentId: 1 },{ id: 4, parentId: 2 },{ id: 5, parentId: 2 },{ id: 6, parentId: 3 },
];


我们的目标是将这个列表转换成如下所示的树结构:

const tree = [{id: 1,parentId: null,children: [{id: 2,parentId: 1,children: [{ id: 4, parentId: 2 },{ id: 5, parentId: 2 }]},{id: 3,parentId: 1,children: [{ id: 6, parentId: 3 }]}]}
];


以下是将列表转换为树的JavaScript函数:

function listToTree(items) {const rootItems = [];const lookup = {};for (const item of items) {const itemId = item['id'];const parentId = item['parentId'];if (!lookup[itemId]) lookup[itemId] = { ['children']: [] };lookup[itemId] = { ...item, children: lookup[itemId]['children'] };if (parentId === null) {rootItems.push(lookup[itemId]);} else {if (!lookup[parentId]) lookup[parentId] = { ['children']: [] };lookup[parentId]['children'].push(lookup[itemId]);}}return rootItems;
}
const tree = listToTree(list);
console.log(JSON.stringify(tree, null, 2));


这个函数首先创建一个空的对象 `lookup` 来存储列表中每个元素的引用,并最终用它来构建树。然后,它遍历列表,对于每个元素,将其添加到 `lookup` 对象中,并根据其 `parentId` 将其作为子元素添加到相应的父元素中。最后,函数返回根元素数组 `rootItems`,它包含了整个树结构。
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/43162.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【图像处理】Krita 一款开源免费专业图像处理软件分享

软件介绍 Krita 是一款专业级的图像处理软件,适合数字绘画和创作。它不仅支持栅格图像的细致编辑,还提供了强大的矢量图形工具,使得用户可以在同一个平台上完成多种类型的创作工作。同时具备一定的矢量图形编辑功能。Krita 的首要用途是绘画…

黑马点评商户缓存查询作业——Redis中查询商户类型

记录下自己在gpt帮助下完成的第一个需求~~~ 1. ShopTypeController 2. IShopTypeService 3. ShopTypeServiceImpl(模仿ShopServiceImpl来写的) 一共分为“1.redis中查询缓存”→“2.判断缓存是否存在,存在直接返回”→“3.缓存不存在则去查数…

2-28 基于matlab提取出频域和时域信号的29个特征

基于matlab提取出频域和时域信号的29个特征,主运行文件feature_extraction,fre_statistical_compute和time_statistical_compute分别提取频域和时域的特征,生成的29个特征保存在生成的feature矩阵中。程序已调通,可直接运行。 2-2…

C语言 printf 函数多种输出格式以及占位输出

一、输出格式 在C语言中,printf 函数提供了多种输出格式,用于控制不同类型数据的输出方式。 1.整数输出格式 %d:以十进制形式输出整数。 %o:以八进制形式输出整数(无前导0)。 %x 或 %X:以十六进…

JavaScript里方括号[]的使用

我们知道可用方括号来表示数组或者JSON对象的属性值,其实在特定场合,方括号还有妙用的。 比如我有数据源是一组JSON,其中有一个属性是时间字符串,我想对时间的小时、星期、日、月分别进行处理。每条JSON都各自生成一条新的JSON&am…

代码随想三刷动态规划篇9

代码随想三刷动态规划篇9 714. 买卖股票的最佳时机含手续费题目代码 714. 买卖股票的最佳时机含手续费 题目 链接 代码 class Solution {public int maxProfit(int[] prices, int fee) {//卖的时候-feeif(prices.length1){return 0;}int[][] dp new int[prices.length][2]…

EAI四个层次服务-系统架构师(二十六)

1、(重点)系统应用集成提供了4个不同层次服务,最上层服务是()服务。 解析: EAI(Enterprise Application Integration)系统应用集成,相关概念。 实施EAI必须保证:应用程…

星间链路与星地链路

目录 一、星间链路 1.1 层内星间链路(Intra-layer ISLs) 1.2 层间星间链路(Inter-layer ISLs) 1.3 实现方式 1.3.1 微波链路 1.3.2 激光链路 二、星地链路 2.1 星地链路的关键特性 2.1.2 Ka信关站 2.1.2 Q/V信关站 2.1…

JavaScript中,正则表达式所涉及的api,解析、实例和总结

JS中正则的api包括以下: String#searchString#splitString#matchString#replaceRegExp#testRegExp#exec 1. String#search 查找输入串中第一个匹配正则的index,如果没有匹配的则返回-1。g修饰符对结果无影响 var string "abbbcbc"; var r…

react根据后端返回数据动态添加路由

以下代码都为部分核心代码 一.根据不同的登录用户,返回不同的权限列表 ,以下是三种不同用户限权列表 const pression { //超级管理员BigAdmin: [{key: "screen",icon: "FileOutlined",label: "数据图表",},{key: "…

谷粒商城学习笔记-使用renren-fast-vue框架时安装依赖包遇到的问题及解决策略

文章目录 1,npm error Class extends value undefined is not a constuctor or null2,npm warn cli npm v10.8.1 does not support Node.js v16.20.2.3,npm error code CERT_HAS_EXPIRED学习心得 这篇文章记录下使用renren-fast-vue&#xff…

QT学习(6)——QT中的定时器事件,两种实现方式;事件的分发event,事件过滤器

目录 引出定时器事件QTimerEventQTimer 事件的分发事件过滤器 总结QT中的鼠标事件定义QLable的鼠标进入离开事件提升为myLabel重写QLabel的函数鼠标的事件鼠标的左中右键枚举鼠标多事件获取和鼠标移动鼠标追踪 QT中的信号和槽自定义信号和槽1.自定义信号2.自定义槽3.建立连接4.…

C++ 类和对象 拷贝构造函数

一 拷贝构造函数的概念: 拷贝构造函数是一种特殊的构造函数,用于创建一个对象是另一个对象的副本。当需要用一个已存在的对象来初始化一个新对象时,或者将对象传递给函数或从函数返回对象时,会调用拷贝构造函数。 二 拷贝构造函…

打卡第6天----哈希表

每天进步一点点,滴水石穿,日积月累,不断提升。 数组和链表章节告一段落。开启哈希表相关的。 哈希表能解决什么问题呢,一般哈希表都是用来快速判断一个元素是否出现集合里 一、有效的字母异位词 leetcode题目编号:242 题目描述: 给定两个字符串 s 和 t ,编写一个函数…

安装和配置 MSYS2

MSYS2(Minimal SYStem 2)是一个为Windows平台提供的轻量级Linux类系统,它集成了大量的GNU工具链、工具和库,为开发者提供了一个类似于Linux的shell环境和完整的开发环境。以下是关于MSYS2的详细介绍: 一、定义与特点 …

深入理解Java中的泛型编程

深入理解Java中的泛型编程 大家好,我是微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 1. 泛型的基础概念 在Java中,泛型编程是一种强大的编程范式,它允许我们编写可以操作各种类型的代…

vagrant远程连接不上问题

如果使用的是vbox虚拟机的host_only的默认ip为56.1开头如果使用这个1作为地址,只能使用转发的形式连接,宿主机使用ssh -p 22222 name127.0.0.1 连接,如果配置的主机位大于1则可以使用虚拟机的ip地址连接。 1使用网络地址转换(ant…

Linux忘记密码重置root密码、重置普通用户密码

重启看到选项按e reboot 或 init 62、移动到Linux开头的行在末尾添加 rw init/bin/bash3、按下Ctrlx引导启动 mount -o remount,rw /输入命令回车更改密码,输入新密码,别用小键盘,容易出错 passwd输入两次校验,出现updated successfully就…

OceanBase 配置项系统变量实现及应用详解(1):配置项的定义及使用方法

《OceanBase 配置项&系统变量实现及应用详解》专题导读 在使用OceanBase的过程中,看到大家经常会遇到“参数”、“配置项”、“系统变量”等概念,却不太清楚它们是不是同一个东西,以及应该如何使用。一些对数据库开发感兴趣的朋友&#…

开源大模型对比

随着chatgpt诞生,开源大模型的也获得了突飞猛进的进展,值得关注的是国内本地私有大模型已经在很多真实的场景中落地,比如智能客服。美国的技术研发能力遥遥领先,但是不得不说落地应用这块是我们的强项。企业使用大模型一般需要考虑…