当前位置: 首页 > news >正文

JS实现树形结构、一维数组以及map之间的转换

const treeData=[
{id:1,
name:'中国',
children:[
{id:11,name:'河南省',children:[{id:111,name:'南阳市',children:[{id:1111,name:'淅川县',children:null}]},{id:112,name:'郑州市',children:[{id:1121,name:'中牟县',children:null}]}]
},
{id:22,name:'广东省',children:[{id:221,name:'深圳市',children:[{id:2211,name:'宝安区',children:null},{id:2212,name:'福田区',children:null}]},{id:222,name:'广州市',children:[{id:2221,name:'天河区',children:null},{id:2222,name:'南沙区',children:null}]}]
}]}
]
const listData1=[
{id:1,name:'中国'},
{id:11,name:'河南省',pid:1},
{id:111,name:'南阳市',pid:11},
{id:1111,name:'淅川县',pid:111},
{id:112,name:'郑州市',pid:11},
{id:1121,name:'中牟县',pid:112},
{id:12,name:'广东省',pid:1},
{id:121,name:'深圳市',pid:12},
{id:1211,name:'宝安区',pid:121},
{id:1212,name:'福田区',pid:121},
{id:122,name:'广州市',pid:12},
{id:1221,name:'天河区',pid:122},
{id:1222,name:'南沙区',pid:122},
]

1、一维数组转树形结构

1.1、递归

//一维数组转树形结构
function listToTree(list){const tree=[]for(const node of list){//如果是父节点if(!node.pid){let p={...node}p.children=getChildren(p.id,list)tree.push(p)}}return tree
}
function getChildren(id,list){const children=[]//遍历数组的每一个元素,如果找到元素的父元素节点等于当前节点,则向children中添加该元素for(const node of list){if(node.pid===id){children.push(node)}}//遍历每一个孩子节点,递归寻找孩子的孩子节点,如果存在children,则向node的children中添加for(const node of children){const children=getChildren(node.id,list)if(children.length){node.children=children}}return children
}

demo:

console.log(listToTree(listData))

打印后的结果和treeData一致。

1.2、双层循环

// 双层循环:找出每一个元素的父节点,向每一个父节点增加children属性
function listToTree2(list){list.forEach(child=>{const pid=child.pid//遍历子节点,然后遍历每一个list节点,从中找出父节点,向父节点增加孩子元素if(pid){list.forEach(parent=>{if(parent.id===pid){//如果找到的父节点还没有孩子,会默认为空数组,否则为原来的子节点数组                    parent.children=parent.children||[]parent.children.push(child)}})}})
}

结果同1.1

1.3、使用map

//Map
function listToListMap(list){const [map,treeData]=[{},[]]//将map转为以id为key,索引为value的对象//将数组中每个元素的children初始化为空数组for(let i=0;i<list.length;i++){map[list[i].id]=i;list[i].children=[]}console.log(map)for(let i=0;i<list.length;i++){const node=list[i]//如果是子元素并且子元素的父节点存在在list中,则找到父元素并向父元素的children中加入子元素if(node.pid&&list[map[node.pid]]){list[map[node.pid]].children.push(node)}else{//说明不是子元素,是父元素直接放入treeData中treeData.push(node)}}return treeData
}

2、tree转list

树形结构转数组涉及到树的遍历,树的遍历分为深度遍历(前中后序)和广度遍历。

2.1、广度遍历

const treeData3=[
{id:1,
name:'中国',
children:[
{id:11,name:'河南省',children:[{id:111,name:'南阳市',pid:11,children:[{id:1111,name:'淅川县',children:null,pid:111,}]},{id:112,name:'郑州市',pid:11,children:[{id:1121,pid:112,name:'中牟县',children:null}]}]
},
{id:22,name:'广东省',children:[{id:221,pid:22,name:'深圳市',children:[{id:2211,pid:221,name:'宝安区',children:null},{id:2212,pid:221,name:'福田区',children:null}]},{id:222,pid:22,name:'广州市',children:[{id:2221,pid:222,name:'天河区',children:null},{id:2222,pid:222,name:'南沙区',children:null}]}]
}]}
]
//广度遍历(一层一层遍历)
function treeToList(treeData){const list=[]const queue=[...treeData]while(queue.length){//取队头元素         const node=queue.shift()const children=node.children//将队头元素的孩子依次放入队列中便于后序遍历if(children){queue.push(...children)}//放入元素节点list.push(node)}return list
}
console.log(treeToList(treeData3))

打印结果同1中的listData

2.2、深度遍历

//深度遍历(采用栈)
function treeToList2(tree){const list=[]const stack=[...tree]while(stack.length){const node=stack.pop()//如果出栈的节点有孩子元素,那么将出栈元素的所有孩子元素都放入栈中,便于后续遍历.const children=node.childrenif(children){stack.push(...children)}list.push(node)}return list
}

3、list转Map(map是以父节点id为key,所有子节点作为数组为value的数据结构)

const listData4=[
{id:1,name:'中国'},//0
{id:11,name:'河南省',pid:1},//1
{id:111,name:'南阳市',pid:11},//2
{id:1111,name:'淅川县',pid:111},//3
{id:112,name:'郑州市',pid:11},//4
{id:1121,name:'中牟县',pid:112},//5
{id:12,name:'广东省',pid:1},//6
{id:121,name:'深圳市',pid:12},//7
{id:1211,name:'宝安区',pid:121},//8
{id:1212,name:'福田区',pid:121},//9
{id:122,name:'广州市',pid:12},//10
{id:1221,name:'天河区',pid:122},//11
{id:1222,name:'南沙区',pid:122},//12
]
// 将列表数据转为以父节点id为key,子节点为value的map
function listToMap(list){const map={}list.forEach(item=>{for(let i=0;i<list.length;i++){//如果外层循环元素的id等于内层循环元素的pid,说明内层元素是外层元素的子元素,则向map的value中添加该内层元素.if(list[i].pid===item.id){map[item.id]=map[item.id]||[]map[item.id].push(list[i])}}})return map
}
console.log(listToMap(listData4))

 

相关文章:

JS实现树形结构、一维数组以及map之间的转换

const treeData[ {id:1, name:中国, children:[ {id:11,name:河南省,children:[{id:111,name:南阳市,children:[{id:1111,name:淅川县,children:null}]},{id:112,name:郑州市,children:[{id:1121,name:中牟县,children:null}]}] }, {id:22,name:广东省,children:[{id:221,name:…...

Vue中自定义.js变量

1、定义.js文件 order.js文件内容&#xff1a; // 订单是否报账 const EXPENESS_STATUS_NO0; const EXPENESS_STATUS_YES1; // 状态 0-未发货 1-发货 2-确认收获 const STATUS_NO0; const STATUS_SEND1; const STATUS_DELIVERY2; // 如何不加这个&#xff0c;vue中引…...

基于深度信念神经网络+长短期神经网络的降雨量预测,基于dbn-lstm的降雨量预测,dbn原理,lstm原理

目录 背影 DBN神经网络的原理 DBN神经网络的定义 受限玻尔兹曼机(RBM) LSTM原理 DBN-LSTM的降雨量预测 基本结构 主要参数 数据 MATALB代码 结果图 展望 背影 DBN是一种深度学习神经网络,拥有提取特征,非监督学习的能力,通过dbn进行无监督学习提取特征,然后长短期神经…...

SyntaxError: Cannot use import statement outside a module

node环境运行报错&#xff1a; 解决步骤&#xff1a; 1. npm init -y 2. 在 package.json 文件中加入一条&#xff1a;"type": "module", 3. 保存后再执行即可 附&#xff1a;最好是不要在node用import&#xff0c;否则需要上次配置 建议1&#xff1a;用re…...

为什么要做数据可视化系统

数据可视化系统在当今数字时代发挥着重要的作用&#xff0c;成为许多组织和企业的不可或缺的工具。随着信息爆炸式增长和数据处理的需求不断增加&#xff0c;数据可视化系统帮助人们更好地理解和分析数据&#xff0c;为决策提供重要支持。数聚股份将详细介绍为什么要做数据可视…...

Java项目作业~ 通过html+Servlet+MyBatis,完成站点信息的添加功能

需求&#xff1a; 通过htmlServletMyBatis&#xff0c;完成站点信息的添加功能。 以下是站点表的建表语句&#xff1a; CREATE TABLE websites (id int(11) NOT NULL AUTO_INCREMENT,name char(20) NOT NULL DEFAULT COMMENT 站点名称,url varchar(255) NOT NULL DEFAULT ,…...

基于 Arduino 编写 ESP32 BLE Server 例程

测试代码如下&#xff1a; 支持 BLE 连接支持 BLE 数据传输 #include <BLEDevice.h> #include <BLEServer.h> #include <BLEUtils.h>namespace BLEServerDemo {BLEServer *pServer nullptr; BLEService *pService nullptr; BLECharacteristic *pCharacte…...

Mac环境变量配置

export HOMEBREW_NO_AUTO_UPDATEtrue关闭Homebrew自动更新&#xff0c;因为每次安装软件都要自动更新&#xff0c;特别慢export JAVA_HOME/Library/Java/JavaVirtualMachines/jdk1.8.0_271.jdk/Contents/Home配置JAVA_HOMEexport ANDROID_HOME/Users/fanpaopao/Library/Android…...

使用FTP文件传输协议的潜在风险

数据&#xff08;事实&#xff0c;数字&#xff0c;价值&#xff09;是当今业务运行的核心要素。但是&#xff0c;如果数据没有得到有效的存储和传输&#xff0c;它们就会成为阻碍业务发展的障碍。如果企业不能及时地把数据送到合适的地方&#xff0c;就会造成严重的经济损失。…...

Jtti:windows虚拟内存最小值太低如何解决

当Windows虚拟内存的最小值设置过低时&#xff0c;可能会导致系统性能下降、应用程序崩溃甚至系统不稳定。解决方法包括&#xff1a; 调整虚拟内存设置&#xff1a; 可以通过以下步骤调整虚拟内存的设置&#xff1a; 右键点击“此电脑”或“计算机”&#xff0c;选择“属性”。…...

基于微服务+Java+Spring Cloud +Vue+UniApp +MySql实现的智慧工地云平台源码

基于微服务JavaSpring Cloud VueUniApp MySql开发的智慧工地云平台源码 智慧工地概念&#xff1a; 智慧工地就是互联网建筑工地&#xff0c;是将互联网的理念和技术引入建筑工地&#xff0c;然后以物联网、移动互联网技术为基础&#xff0c;充分应用BIM、大数据、人工智能、移…...

Unity框架学习--4 Mono管理器

作用&#xff1a;使不继承MonoBehaviour的类能够开启协程&#xff0c;并且可以使用FixedUpdate、Update、LateUpdate进行每帧更新。 原理&#xff1a; 1、在场景中创建一个继承MonoBehaviour的“执行者”脚本&#xff0c;这个脚本就专门用来开启协程和监听帧更新。 2、Mono管理…...

Unity zSpace 开发

文章目录 1.下载 zSpace 开发环境1.1 zCore Unity Package1.2 zView Unity Package 2. 导入工程3. 发布设置4.功能实现4.1 用触控笔来实现对模型的拖拽&#xff1a; 5. 后续更新 1.下载 zSpace 开发环境 官网地址 1.1 zCore Unity Package zSpace 开发核心必须 1.2 zView …...

SQL注入是什么?如何防范?

什么是SQL注入&#xff1f; SQL注入&#xff08;SQLi&#xff09;是一种注入攻击&#xff0c;可以执行恶意SQL语句。它通过将任意SQL代码插入数据库查询&#xff0c;使攻击者能够完全控制Web应用程序后面的数据库服务器。攻击者可以使用SQL注入漏洞绕过应用程序安全措施&#…...

Spring kafka源码分析——消息是如何消费的

文章目录 概要端点注册创建监听容器启动监听容器消息拉取与消费小结 概要 本文主要从Spring Kafka的源码来分析&#xff0c;消费端消费流程&#xff1b;从spring容器启动到消息被拉取下来&#xff0c;再到执行客户端自定义的消费逻辑&#xff0c;大致概括为以下4个部分&#x…...

汽车电子的发展对国产32位MCU的影响

32位MCU是目前产品市场的主流&#xff0c;尤其是在汽车电子发展起来后&#xff0c;32位MCU在市场的比重迅速增涨&#xff0c;国内32位MCU厂商抓住风口&#xff0c;推出一系列汽车电子芯片从而稳定国内市场。如芯海的CS32F030系列就是主要应用汽车电子市场的32位MCU。 根据市场…...

Vue 目录结构 vite 项目

Vue3 项目常用的目录结构和每个文件的作用【通过 vite 创建的项目】 vite目录结构&#xff1a; dist // 打包后生成的文件目录 node_modules // 环境依赖 public // 公共资源目录 favicon.ico …...

TB/TM-商品详情原数据(APP)

一、接口参数说明&#xff1a; item_get_app-获得TB/TMapp商品详情原数据&#xff0c;点击更多API调试&#xff0c;请移步注册API账号点击获取测试key和secret 公共参数 请求地址: https://api-gw.onebound.cn/taobao/item_get_app 名称类型必须描述keyString是调用key&…...

小米发布会:雷军成长故事与创新壮举,AI大模型技术引领未来,雷军探索之路之从创业波折到小米AI领航,成就高端化传奇!

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

春秋云镜 CVE-2021-41947

春秋云镜 CVE-2021-41947 Subrion CMS v4.2.1 存在sql注入 靶标介绍 Subrion CMS v4.2.1 存在sql注入。 启动场景 漏洞利用 exp http://localhost/panel/visual-mode.json?getaccess&typeblocks UNION ALL SELECT username, password FROM sbr421_members -- -&o…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...

Caliper 配置文件解析:fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

淘宝扭蛋机小程序系统开发:打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...