扁平数组转化分类树

使用下列数组生成一个分类树(数组中每项中的pid是父节点的id,pid:0表示顶层,pid:1,表示这个节点属于id为1的节点,children该节点的子节点数组)

const jsona = [{"ID": 1,"CreatedAt": "2022-05-26T15:59:53.726+08:00","UpdatedAt": "2022-05-26T15:59:53.726+08:00","creationDate": "","title": "分类","pid": "0","children": null
}, {"ID": 2,"CreatedAt": "2022-05-26T16:00:06.96+08:00","UpdatedAt": "2022-05-26T16:00:06.96+08:00","creationDate": "","title": "容量","pid": "4","children": null
}, {"ID": 3,"CreatedAt": "2022-05-26T16:00:14.007+08:00","UpdatedAt": "2022-05-26T16:00:14.007+08:00","creationDate": "","title": "颜色","pid": "4","children": null
}, {"ID": 4,"CreatedAt": "2022-05-26T16:00:19.643+08:00","UpdatedAt": "2022-05-26T16:00:19.643+08:00","creationDate": "","title": "手机","pid": "1","children": null
}, {"ID": 5,"CreatedAt": "2022-05-26T16:00:29.451+08:00","UpdatedAt": "2022-05-26T16:00:29.451+08:00","creationDate": "","title": "电脑","pid": "1","children": null
}, {"ID": 6,"CreatedAt": "2022-05-26T16:00:38.198+08:00","UpdatedAt": "2022-05-26T16:00:38.198+08:00","creationDate": "","title": "128G","pid": "2","children": null
}, {"ID": 7,"CreatedAt": "2022-05-26T16:00:44.32+08:00","UpdatedAt": "2022-05-26T16:00:44.32+08:00","creationDate": "","title": "256G","pid": "2","children": null
}, {"ID": 8,"CreatedAt": "2022-05-26T16:00:55.368+08:00","UpdatedAt": "2022-05-26T16:00:55.368+08:00","creationDate": "","title": "金色","pid": "3","children": null
}, {"ID": 9,"CreatedAt": "2022-05-26T16:01:01.751+08:00","UpdatedAt": "2022-05-26T16:01:01.751+08:00","creationDate": "","title": "银色","pid": "3","children": null
}, {"ID": 10,"CreatedAt": "2022-05-31T10:49:24.062+08:00","UpdatedAt": "2022-05-31T10:49:24.062+08:00","creationDate": "","title": "macbook Air 2022","pid": "5","children": null
}, {"ID": 12,"CreatedAt": "2022-05-31T10:49:47.497+08:00","UpdatedAt": "2022-05-31T10:49:47.497+08:00","creationDate": "","title": "m1","pid": "11","children": null
}, {"ID": 13,"CreatedAt": "2022-05-31T10:50:00.801+08:00","UpdatedAt": "2022-05-31T10:50:00.801+08:00","creationDate": "","title": "i5","pid": "11","children": null
}, {"ID": 15,"CreatedAt": "2022-05-31T10:51:22.369+08:00","UpdatedAt": "2022-05-31T10:51:22.369+08:00","creationDate": "","title": "CPU","pid": "10","children": null
}, {"ID": 16,"CreatedAt": "2022-05-31T10:51:29.098+08:00","UpdatedAt": "2022-05-31T10:51:29.098+08:00","creationDate": "","title": "M1","pid": "15","children": null
}, {"ID": 17,"CreatedAt": "2022-05-31T10:51:37.599+08:00","UpdatedAt": "2022-05-31T10:51:37.599+08:00","creationDate": "","title": "I7","pid": "15","children": null
}, {"ID": 18,"CreatedAt": "2022-05-31T10:51:48.028+08:00","UpdatedAt": "2022-05-31T10:51:48.028+08:00","creationDate": "","title": "内存","pid": "10","children": null
}, {"ID": 19,"CreatedAt": "2022-05-31T10:51:54.358+08:00","UpdatedAt": "2022-05-31T10:51:54.358+08:00","creationDate": "","title": "8G","pid": "18","children": null
}, {"ID": 20,"CreatedAt": "2022-05-31T10:51:59.569+08:00","UpdatedAt": "2022-05-31T10:51:59.569+08:00","creationDate": "","title": "16G","pid": "18","children": null
}]

思路

为了将上述数组转换成分类树结构,我们可以使用递归方法来构建树形数据结构。主要步骤包括:

  1. 创建一个映射表,用于快速查找每个节点。
  2. 遍历数组,根据 pid 值将子节点添加到其父节点的 children 数组中。
  3. 查找 pid 为 0 的节点作为根节点。

代码实现

function buildTree(data) {const map = {};const rootNodes = [];// 遍历所有数据,构建映射表data.forEach(item => {map[item.ID] = { ...item, children: [] };});// 再次遍历数据,构建树形结构data.forEach(item => {const node = map[item.ID];if (item.pid === '0') {rootNodes.push(node);} else {const parent = map[item.pid];if (parent) {parent.children.push(node);}}});return rootNodes;
}
const treeData = buildTree(jsona);
// 输出结果
console.log(treeData);

在这里插入图片描述

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

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

相关文章

【计算机视觉前沿研究 热点 顶会】ECCV 2024中扩散模型有关的论文

神经辐射场修复的驯服潜在扩散模型 神经辐射场(NERF)是一种从多视角图像进行三维重建的表示法。尽管最近的一些工作表明,在编辑具有扩散先验的重建的 NERF 方面取得了初步成功,但他们仍然在努力在完全未覆盖的区域中合成合理的几何图形。一个主要原因是…

使用大型语言模型进行监督微调(SFT)

大型语言模型(LLMs)通常经过几个阶段的训练,包括预训练和几个微调阶段;请参见下文。尽管预训练很昂贵(即需要数十万美元的计算成本),但相比之下,微调LLM(或进行上下文学习…

应用商店优化(ASO)的四大误区

应用商店优化 (ASO) 是移动营销中最重要的部分之一,可以帮助开发人员吸引自然流量并在应用推广方面取得预期效果。近年来ASO优化在开发者中越来越受欢迎。虽然它已经证明了其有效性和对应用成功的影响力,但尽管如此仍然存在与ASO相关的误解,导…

Day-04-QFile打开文件的两种方式

一、UI界面设置两个按键&#xff0c;并直接转到槽函数 二、两种代码展示 #include <QFile> #include <QDebug>//此两种方式中调用函数&#xff0c;应包含的头文件void Widget::on_btnReadFile01_clicked()//第一种打开方式 {//1. 打开文件QFile file;file.setFile…

ARM发布新一代高性能处理器N3

简介 就在2月21日&#xff0c;ARM发布了新一代面向服务器的高性能处理器N3和V3&#xff0c;N系列平衡性能和功耗&#xff0c;而V系列则注重更高的性能。此次发布的N3&#xff0c;单个die最高32核&#xff08;并加入到CCS&#xff0c;Compute Subsystems&#xff0c;包含Core&a…

【Unity案例】搭建射击系统与UI

上期将基础的移动系统搭建完毕后就可以开始搭建更加复杂的系统部分了 前排提示&#xff0c;由于一开始仅思考如何完成操作相关功能&#xff0c;以至于到后面重构稍微有些困难&#xff0c;继续写下去恐成屎山&#xff0c;故在搭完射击和武器UI后不再继续泛化到敌人和敌人状态机…

本地Gitblit使用

首先创建一个本地的gitblit的服务&#xff0c;创建流程如下&#xff1a; 【GitBlit】Windows搭建Git服务器详细教程_搭建gitblit服务-CSDN博客 GitBlit的使用教程-CSDN博客 创建好一个仓库后&#xff0c;分配好用户权限&#xff0c;再将项目拉下来&#xff0c;这里是再visua…

PhpStorm 下调试功能配置

调试是开发过程中的关键环节&#xff0c;能够极大地减少应用程序中的错误并提高代码质量。PhpStorm 作为一款功能强大的 IDE&#xff0c;提供了丰富的调试功能&#xff0c;结合 Xdebug&#xff0c;可以让开发者更轻松地进行 PHP 应用程序的调试。本指南将详细介绍如何在 PhpSto…

JS中正则表达式捕获组与反向引用详解

正则表达式&#xff08;Regular Expression&#xff0c;简称 Regex&#xff09;是一种强大的字符串匹配工具&#xff0c;它能够让我们通过模式来查找、匹配、替换字符串中的内容。而在正则表达式中&#xff0c;捕获组是一个非常重要的概念&#xff0c;常常用于将匹配到的内容保…

零信任赋予安全牙齿,AI促使它更锋利

距离上次写关于安全的文字已经过去了很久很久&#xff0c;久到上次看到的AI还停留在TTS、ASR等最初的语音交互搜索类似的各种智能音箱以及通过关键字匹配的基于知识库的聊天的机器人。之后的几年各种视觉识别遍地开花&#xff0c;AI四小龙在人脸识别上成熟应用&#xff0c;再然…

系统演示视频正确的录制顺序

低效的录制 低效的录制有几个问题&#xff1a; 1&#xff09;视频演讲稿没有提前写 写稿子是挺麻烦&#xff0c;但写好稿子后&#xff0c;可以让领导先看。如果稿子要修改&#xff0c;视频重新制作、剪辑的概率很大。返工情况概率大。 2&#xff09;视频配音不是AI生成&…

浏览器百科:网页存储篇-如何在Chrome打开localStorage窗格(五)

1.引言 在前面的章节中&#xff0c;我们详细介绍了 localStorage 的基本概念、特性及其常用方法&#xff0c;帮助开发者在网页应用中实现数据的持久化存储。为了更好地管理和调试这些存储的数据&#xff0c;了解如何打开和使用浏览器的 localStorage 窗格是非常重要的。本篇文…

科研绘图系列:R语言差异基因四分图(Quad plot)

介绍 四分图(Quad plot)是一种数据可视化技术,通常用于展示四个变量之间的关系。它由四个子图组成,每个子图都显示两个变量之间的关系。四分图的布局通常是2x2的网格,每个格子代表一个变量对的散点图。 在四分图中,通常: 第一个子图显示变量A和B的关系。第二个子图显示…

海外云服务器安装 MariaDB10.6.X (Ubuntu 18.04 记录篇二)

本文首发于 秋码记录 MariaDB 的由来&#xff08;历史&#xff09; 谈起新秀MariaDB&#xff0c;或许很多人都会感到陌生吧&#xff0c;但若聊起享誉开源界、业界知名的关系型数据库——Mysql&#xff0c;想必混迹于互联网的人们&#xff08;coder&#xff09;无不知晓。 其…

信捷 XD PLC 位软元件

位软元件的种类相对简单&#xff0c;一般为常见的 X、Y、M、HM、S、HS、T、HT、C、HC&#xff0c; 除此之外&#xff0c; 还可由寄存器中的某一位来表示。 1&#xff09;继电器 ⚫ 输入继电器 X&#xff0c;八进制表示法。 ⚫ 输出继电器 Y&#xff0c;八进制表示法。 ⚫ …

SQL语言的规则和规范

规则 是什么呢&#xff0c;规则就是我们最基本&#xff0c;每时每刻都要遵守的比如人行道靠右&#xff0c;不能逆行&#xff0c; 规范 呢就是锦上添花&#xff0c;如果你不这么做&#xff0c;是不那么道德&#xff0c;不那么好的&#xff0c;就像小学生见到老师要问好&#…

C++11(1)

目录 前言 小故事 C11优势 统一的列表初始化 1.{}初始化 2. std::initializer_list 声明 1.auto 2.decltype 3.nullptr 前言 小故事 1998 年是 C 标准委员会成立的第一年&#xff0c;本来计划以后每 5 年视实际需要更新一次标准&#xff0c; C 国际 标准委员会在研究…

Axure制作圆球在区域范围内移动效果的案例

在Axure RP中&#xff0c;我们可以通过设置多个交互动作和动态面板来创建复杂的动画效果&#xff0c;比如实现一个圆球在指定区域内通过八个方向按钮控制移动的效果。以下是一个详细的步骤介绍&#xff0c;帮助你理解并制作这一效果。 预览&#xff1a; https://1zvcwx.axshare…

硬件工程师笔试面试知识器件篇——二极管

目录 4、二极管 4.1、基础 二极管原理图 二极管实物图 4.1.1、基本特性 4.1.2、常见类型 4.1.3、工作原理 4.1.4、应用领域 4.2、相关问题 4.2.1、二极管的PN结是如何形成的? 4.2.2、发光二极管(LED)的工作原理是什么? 4.2.3、在电子电路中,二极管通常如何应用?…

简述CCS平面线性光源

光源在机器视觉系统中起着重要作用&#xff0c;不同环境、场景及应用合适光源都不一样&#xff0c;今天我们来看看LFX3-PT系列平面线性光源。它是最适合检测镜面物体的凹凸,外壳小巧的光源。备有根据检测条件可选的2种线间距。1mm型&#xff08;型号末尾&#xff1a;A&#xff…