从扁平数据到树形数据: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

相关文章

java中pdf模版填充表单踩坑实战记录(itextPdf、openPdf、pdfbox)

《java中pdf模版填充表单踩坑实战记录(itextPdf、openPdf、pdfbox)》:本文主要介绍java中pdf模版填充表单踩坑的相关资料,OpenPDF、iText、PDFBox是三... 目录准备Pdf模版方法1:itextpdf7填充表单(1)加入依赖(2)代码(3)遇到的问题方法2:pd

Java Stream流之GroupBy的用法及应用场景

《JavaStream流之GroupBy的用法及应用场景》本教程将详细介绍如何在Java中使用Stream流的groupby方法,包括基本用法和一些常见的实际应用场景,感兴趣的朋友一起看看吧... 目录Java Stream流之GroupBy的用法1. 前言2. 基础概念什么是 GroupBy?Stream

python设置环境变量路径实现过程

《python设置环境变量路径实现过程》本文介绍设置Python路径的多种方法:临时设置(Windows用`set`,Linux/macOS用`export`)、永久设置(系统属性或shell配置文件... 目录设置python路径的方法临时设置环境变量(适用于当前会话)永久设置环境变量(Windows系统

python使用try函数详解

《python使用try函数详解》Pythontry语句用于异常处理,支持捕获特定/多种异常、else/final子句确保资源释放,结合with语句自动清理,可自定义异常及嵌套结构,灵活应对错误场景... 目录try 函数的基本语法捕获特定异常捕获多个异常使用 else 子句使用 finally 子句捕获所

Mysql中设计数据表的过程解析

《Mysql中设计数据表的过程解析》数据库约束通过NOTNULL、UNIQUE、DEFAULT、主键和外键等规则保障数据完整性,自动校验数据,减少人工错误,提升数据一致性和业务逻辑严谨性,本文介绍My... 目录1.引言2.NOT NULL——制定某列不可以存储NULL值2.UNIQUE——保证某一列的每一

深度解析Nginx日志分析与499状态码问题解决

《深度解析Nginx日志分析与499状态码问题解决》在Web服务器运维和性能优化过程中,Nginx日志是排查问题的重要依据,本文将围绕Nginx日志分析、499状态码的成因、排查方法及解决方案展开讨论... 目录前言1. Nginx日志基础1.1 Nginx日志存放位置1.2 Nginx日志格式2. 499

SpringBoot监控API请求耗时的6中解决解决方案

《SpringBoot监控API请求耗时的6中解决解决方案》本文介绍SpringBoot中记录API请求耗时的6种方案,包括手动埋点、AOP切面、拦截器、Filter、事件监听、Micrometer+... 目录1. 简介2.实战案例2.1 手动记录2.2 自定义AOP记录2.3 拦截器技术2.4 使用Fi

最新Spring Security的基于内存用户认证方式

《最新SpringSecurity的基于内存用户认证方式》本文讲解SpringSecurity内存认证配置,适用于开发、测试等场景,通过代码创建用户及权限管理,支持密码加密,虽简单但不持久化,生产环... 目录1. 前言2. 因何选择内存认证?3. 基础配置实战❶ 创建Spring Security配置文件

Python对接支付宝支付之使用AliPay实现的详细操作指南

《Python对接支付宝支付之使用AliPay实现的详细操作指南》支付宝没有提供PythonSDK,但是强大的github就有提供python-alipay-sdk,封装里很多复杂操作,使用这个我们就... 目录一、引言二、准备工作2.1 支付宝开放平台入驻与应用创建2.2 密钥生成与配置2.3 安装ali

Spring Security 单点登录与自动登录机制的实现原理

《SpringSecurity单点登录与自动登录机制的实现原理》本文探讨SpringSecurity实现单点登录(SSO)与自动登录机制,涵盖JWT跨系统认证、RememberMe持久化Token... 目录一、核心概念解析1.1 单点登录(SSO)1.2 自动登录(Remember Me)二、代码分析三、