js实现树形数据转成扁平数据的方法示例
作者:蔚莱先森 发布时间:2024-03-28 13:52:29
标签:js,树形数据,扁平数据
利用递归的方法循环树形数组,当遇到有children的对象再次调用递归函数循环children数组,每次循环的数据放入一个提前声明好的数组里,等所有递归函数执行完,这个数组即是想要得到的扁平数据数组。
let res = []
const fn = (source)=>{
source.forEach(el=>{
res.push(el)
el.children && el.children.length>0 ? fn(el.children) : ""
})
}
示例1
let res = [] // 用于存储递归结果(扁平数据)
// 递归函数
const fn = (source)=>{
source.forEach(el=>{
res.push(el)
el.children && el.children.length>0 ? fn(el.children) : "" // 子级递归
})
}
// 树形数据
const arr = [
{ id: "1", rank: 1 },
{ id: "2", rank: 1,
children:[
{ id: "2.1", rank: 2 },
{ id: "2.2", rank: 2 }
]
},
{ id: "3", rank:1,
children:[
{ id: "3.1", rank:2,
children: [
{ id:'3.1.1', rank:3,
children:[
{ id: "3.1.1.1", rank: 4,
children:[
{ id: "3.1.1.1.1", rank: 5 }
]
}
]
}
]
}
]
}
]
fn(arr) // 执行递归函数
console.log(res) // 查看结果
结果:
查看源码
扁平数据转成树形数据,请参考这篇文章:js实现无限层级树形数据结构(创新算法)
js将扁平结构数据转换为树形结构
递归实现
function transformTree (list) {
const tree = []
for (let i = 0, len = list.length; i < len; i++) {
if (!list[i].pid) {
const item = queryChildren(list[i], list)
tree.push(item)
}
}
return tree
}
function queryChildren (parent, list) {
const children = []
for (let i = 0, len = list.length; i < len; i++) {
if (list[i].pid === parent.id) {
const item = queryChildren(list[i], list)
children.push(item)
}
}
if (children.length) {
parent.children = children
}
return parent
}
尽管后续对上面的算法进行了很多优化,但是仍未离开递归,递归可能遇到的问题还是会有可能遇到
循环实现
随着进化,循环代替递归是必然的结果~
两次循环
开始使用循环实现时,使用了两次循环完成转换,先进行一次循环将数据转换成 map 结构,使其能通过 id 快速查询
function transformTree (list) {
const tree = []
const record = {}
const length = list.length
for (let i = 0; i < length; i++) {
const item = list[i]
item.children = [] // 重置 children
record[item.id] = item
}
for (let i = 0; i < length; i++) {
const item = list[i]
if (item.pid) {
if (record[item.pid]) {
record[item.pid].children.push(item)
}
} else {
tree.push(item)
}
}
return tree
}
上面的算法相较于递归的实现,不存在栈溢出的问题,而且是线性复杂度,效率已经提高了许多
一次循环
再进行一定的优化,最后变成一次循环完成树形构建
function transformTree (list) {
const tree = []
const record = {}
for (let i = 0, len = list.length; i < len; i++) {
const item = list[i]
const id = item.id
if (record[id]) {
item.children = record[id]
} else {
item.children = record[id] = []
}
if (item.pid) {
if (!record[item.pid]) {
record[item.pid] = []
}
record[item.pid].push(item)
} else {
tree.push(item)
}
}
}
使用对象变量的特性,使用 map 结构直接指向 children 数组,在循环中初始化的同时还能快速查找插入相应的 children 里,使其在一次循环内完成构建,最后附上完整版~
function transformTree (list, options = {}) {
const {
keyField = 'id',
childField = 'children',
parentField = 'parent'
} = options
const tree = []
const record = {}
for (let i = 0, len = list.length; i < len; i++) {
const item = list[i]
const id = item[keyField]
if (!id) {
continue
}
if (record[id]) {
item[childField] = record[id]
} else {
item[childField] = record[id] = []
}
if (item[parentField]) {
const parentId = item[parentField]
if (!record[parentId]) {
record[parentId] = []
}
record[parentId].push(item)
} else {
tree.push(item)
}
}
return tree
}
来源:https://blog.csdn.net/Mr_JavaScript/article/details/102833991
0
投稿
猜你喜欢
- 本文实例讲述了Python3实现的判断回文链表算法。分享给大家供大家参考,具体如下:问题:请判断一个链表是否为回文链表。方案一:指针法cla
- 1. Anaconda1.1 Anaconda简介Anaconda是一个开源的python发行版本,是现在比较流行的python数据科学平台
- 改代码是在windows 系统下打开路径和保存路径换成自己的就可以啦~import numpy as npimport matplotlib
- 雅虎的BrowserPlus在曝光了N久后终于发布了,一款类似于Google Gears的浏览器增强插件。在支持的操作系统方面,Gears明
- 我们一般在Excel里面是使用数据连接属性里面写sql语句,或者vba里面利用ado组件执行sql语句。新版的Excel里面带上了Power
- 因为最近在做深度学习抠图,正好要用到蒙版进行抠图,所以我将抠图代码进行了封装注释,可以直接使用。可能走了弯路,若有高见请一定提出!主要代码i
- super()函数可以用于继承父类的方法,语法如下:super(type[, object-or-type])虽然super()函数的使用比
- TensorFlow中tf.batch_matmul()用法如果有两个三阶张量,size分别为a.shape = [100, 3, 4]b.
- 一心想学习算法,很少去真正静下心来去研究,前几天趁着周末去了解了最短路径的资料,用python写了一个最短路径算法。算法是基于带权无向图去寻
- MOCK的意义1.接口测试等待开发完成接口开发之后再进行,不符合测试的尽早测试的基本原则,我们可以利用MOCK工具来模拟接口,减少对开发的依
- 1、实现 __getitem__(self)class Library(object): def __init__(self):
- 5月20日,微软正式提供了Windows XP下可用的雅黑字体下载,雅黑字体是一款近乎完美的字体,解决了宋体小文字无法辩认的问
- 你一定很熟悉Youtube了,知道它是一个视频分享网站。是的,youtube目前十分流行,你也许会常常访问。这里有一些关于youtube u
- 一.局部变量、全局变量1.什么是局部变量作用范围在函数内部,在函数外部无法使用2.什么是全局变量在函数内部和外部均可使用3.如何将函数内定义
- loss函数如何接受输入值keras封装的比较厉害,官网给的例子写的云里雾里,在stackoverflow找到了答案You can wrap
- 一、关于空值 提示: 在MySQL中如果不为NOT NULL字段赋值(等同于赋NULL值) 例如: 为一个NOT NULL的整型赋NULL值
- jieba 库是优秀的中文分词第三方库,中文文本需要通过分词获得单个的词语1、jieba库安装管理员身份运行cmd窗口输入命令:pip in
- 现在有很多的项目,对计数器的实现甚是随意,比如在实现网站文章点击数的时候,是这么设计数据表的,如:”article_id, article_
- 我们在讲模块的时候,有些人看到了内置属性,就把它们当做函数,其实还是有区别的,这里需要为大家进行明确。我们所看到的函数两边带有双下划线,这是
- 曾经为看别人写的杂乱代码而头痛吗?曾经为看BWindow代码而烦恼吗?曾经为减小JS体积和JS的可读性之间的矛盾而左右徘徊吗?最好的办法是有