从扁平数据到树形数据:JavaScript 函数实现与解析

2024-09-04 01:36

本文主要是介绍从扁平数据到树形数据:JavaScript 函数实现与解析,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

我今天遇到扁平数据处理,但是有的数据在父级前面所以无法渲染进去,于是完善了一下转树形数据,大家一起看看吧

function GetTreeData(data) {let TreeData = [];let map = new Map(); // 存在 id, 对应所在的内存地址let outputObj, pid;// 存储无法立即处理的节点let pendingNodes = [];for (let i = 0; i < data.length; i++) {pid = data[i].pid;if (map.has(pid)) {// 存在,将此信息加入到对应 id=pid 的对象上的 childrenif (!map.get(pid).children) map.get(pid).children = [];let obj = { ...data[i] };map.get(pid).children.push(obj);map.set(data[i].id, obj);} else if (pid == 0) {// 处理 pid 为 0 的情况outputObj = { ...data[i] };TreeData.push(outputObj);map.set(data[i].id, outputObj);} else {// 暂时无法处理的节点pendingNodes.push(data[i]);}}// 处理所有暂存的节点while (pendingNodes.length > 0) {let newPendingNodes = [];for (let i = 0; i < pendingNodes.length; i++) {let node = pendingNodes[i];pid = node.pid;if (map.has(pid)) {// 父节点现在已存在,可以处理if (!map.get(pid).children) map.get(pid).children = [];let obj = { ...node };map.get(pid).children.push(obj);map.set(node.id, obj);} else {// 父节点仍然不存在,重新暂存newPendingNodes.push(node);}}// 如果没有新节点被处理,说明存在循环或缺少父节点if (newPendingNodes.length === pendingNodes.length) {console.error("无法处理以下节点,可能缺少父节点或存在循环引用:", newPendingNodes);break;}pendingNodes = newPendingNodes;}return TreeData;
}

这篇关于从扁平数据到树形数据:JavaScript 函数实现与解析的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热

python常见环境管理工具超全解析

《python常见环境管理工具超全解析》在Python开发中,管理多个项目及其依赖项通常是一个挑战,下面:本文主要介绍python常见环境管理工具的相关资料,文中通过代码介绍的非常详细,需要的朋友... 目录1. conda2. pip3. uvuv 工具自动创建和管理环境的特点4. setup.py5.

SQL Server修改数据库名及物理数据文件名操作步骤

《SQLServer修改数据库名及物理数据文件名操作步骤》在SQLServer中重命名数据库是一个常见的操作,但需要确保用户具有足够的权限来执行此操作,:本文主要介绍SQLServer修改数据... 目录一、背景介绍二、操作步骤2.1 设置为单用户模式(断开连接)2.2 修改数据库名称2.3 查找逻辑文件名

C++中零拷贝的多种实现方式

《C++中零拷贝的多种实现方式》本文主要介绍了C++中零拷贝的实现示例,旨在在减少数据在内存中的不必要复制,从而提高程序性能、降低内存使用并减少CPU消耗,零拷贝技术通过多种方式实现,下面就来了解一下... 目录一、C++中零拷贝技术的核心概念二、std::string_view 简介三、std::stri

C++高效内存池实现减少动态分配开销的解决方案

《C++高效内存池实现减少动态分配开销的解决方案》C++动态内存分配存在系统调用开销、碎片化和锁竞争等性能问题,内存池通过预分配、分块管理和缓存复用解决这些问题,下面就来了解一下... 目录一、C++内存分配的性能挑战二、内存池技术的核心原理三、主流内存池实现:TCMalloc与Jemalloc1. TCM

OpenCV实现实时颜色检测的示例

《OpenCV实现实时颜色检测的示例》本文主要介绍了OpenCV实现实时颜色检测的示例,通过HSV色彩空间转换和色调范围判断实现红黄绿蓝颜色检测,包含视频捕捉、区域标记、颜色分析等功能,具有一定的参考... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

Java对异常的认识与异常的处理小结

《Java对异常的认识与异常的处理小结》Java程序在运行时可能出现的错误或非正常情况称为异常,下面给大家介绍Java对异常的认识与异常的处理,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参... 目录一、认识异常与异常类型。二、异常的处理三、总结 一、认识异常与异常类型。(1)简单定义-什么是

Python中help()和dir()函数的使用

《Python中help()和dir()函数的使用》我们经常需要查看某个对象(如模块、类、函数等)的属性和方法,Python提供了两个内置函数help()和dir(),它们可以帮助我们快速了解代... 目录1. 引言2. help() 函数2.1 作用2.2 使用方法2.3 示例(1) 查看内置函数的帮助(

SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志

《SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志》在SpringBoot项目中,使用logback-spring.xml配置屏蔽特定路径的日志有两种常用方式,文中的... 目录方案一:基础配置(直接关闭目标路径日志)方案二:结合 Spring Profile 按环境屏蔽关