当前位置:网站首页>js如何实现数组转树
js如何实现数组转树
2022-07-04 23:49:00 【亿速云】
js如何实现数组转树
本篇内容介绍了“js如何实现数组转树”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
原生 封装工具函数 getTree
1.1 定义
-映射对象 map
数组 treeList=[]
1.2 遍历后端返回的数组 list 为 每个数组对象item 添加 children 属性 值为空数组

1.3 为映射对象 map 添加属性 并赋值key:id值 value:item

1.4 遍历数组对象list 当item.pid为空时 为一级目录 将该一级目录数组对象 添加到treeList中

1.5 通过 item.pid获取到 id 不为空时 获取数组对象 pid为01

1.6 获取 映射对象 map 获取到 属性名01 将该数组对象item 添加 到children中 并返回到treeList中
代码:

结构图:

“js如何实现数组转树”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
边栏推荐
- 业务实现-日志写到同一个行数据里面
- Meet ThreadPoolExecutor
- 雅思考试流程、需要具体注意些什么、怎么复习?
- Intelligence test to see idioms guess ancient poems wechat applet source code
- French scholars: the explicability of counter attack under optimal transmission theory
- Using the uniapp rich text editor
- 图解网络:什么是网关负载均衡协议GLBP?
- go踩坑——no required module provides package : go.mod file not found in current directory or any parent
- Pict generate orthogonal test cases tutorial
- Solution record of jamming when using CAD to move bricks in high configuration notebook
猜你喜欢

MariaDB's Galera cluster application scenario -- multi master and multi active databases
![[binary tree] the maximum difference between a node and its ancestor](/img/b5/1bc3d102754fc44c6a547807ebab94.png)
[binary tree] the maximum difference between a node and its ancestor

PMP证书续证流程

Font design symbol combination multifunctional wechat applet source code

CTF競賽題解之stm32逆向入門

青海省国家湿地公园功能区划数数据、全国湿地沼泽分布数据、全国省市县自然保护区

Fast parsing intranet penetration helps enterprises quickly achieve collaborative office

Solution record of jamming when using CAD to move bricks in high configuration notebook

Face recognition 5- insight face padding code practice notes

Every time I look at the interface documents of my colleagues, I get confused and have a lot of problems...
随机推荐
The pit of sizeof operator in C language
圖解網絡:什麼是網關負載均衡協議GLBP?
Combien de temps faut - il pour obtenir un certificat PMP?
French scholars: the explicability of counter attack under optimal transmission theory
Why does infographic help your SEO
The difference between cout/cerr/clog
模板的进阶
用快解析内网穿透实现零成本自建网站
Réseau graphique: Qu'est - ce que le Protocole d'équilibrage de charge de passerelle glbp?
uniapp 除了数字,其他输入无效
城市轨道交通站应急照明疏散指示系统设计
45岁教授,她投出2个超级独角兽
图解网络:什么是网关负载均衡协议GLBP?
股票账户佣金怎么调低,炒股佣金怎么调低网上开户安全吗
js正则表达式之中文验证(转)
积分商城游戏设置的基本要点
What is the difference between port mapping and port forwarding
[Peking University] tensorflow2.0-1-opening
CTF competition problem solution STM32 reverse introduction
Design of emergency lighting evacuation indication system for urban rail transit station