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

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时,有没有考虑过 JVM 是如何把静态的字节码(byte code)转化为运行时对象的呢,这个问题看似简单,但清楚的同学相信也不会太多,这篇文章首先介绍 JVM 类初始化的机制,然后给出几个易出错的实例来分析,帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段,分别是:loading 、Linking、initialization

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程,特意画了如下的类图,包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口,接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类,它们之间的依赖,构建起了整个框架。想要理解整个架构,最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文(security context)的信息。当前操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展,我们的业务数据越来越多,单纯使用 MySQL 已经不能满足我们的数据查询需求,例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后,随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步,我们目前的解决方案是建立数据中间表。把需要检索的业务数据,统一放到一张M