文
章
目
录
章
目
录
本文主要讲解关于JS实现扁平数据和树状数据相互转换相关内容,让我们来一起学习下吧!
前言
平时处理数据就经常要处理树状和平面结构数据的转化,所以就写来记一下,方便下次用直接copy,用的都是比较笨重的方法,大家要是还有其他好的方法可以分享就太感谢了
树状转扁平数据
方法一
正向深入,顺着树的方向一级级下钻,先讲父级元素添加到准备号的数组里面,如果有子级就继续深下直到不能下去
得到的数据就是顺着树方向来的,得到的数据大概是这样子的1_1,1_1_1,1_1_2,…(也可以反向下钻,将resultArr.push(val)语句放到判断的后面,得到的顺序大概是这样的1_1_1,1_1_2,1_1…)
const arr = [
{
id: '1',
name: '1_1',
children: [
{ id: 'a', name: '1_1_1' },
{ id: 'b', name: '1_1_2' },
]
},
{
id: '2',
name: '2_2',
children: [
{ id: 'a', name: '2_2_2' }
]
}
]
const resultArr = []
function treeToData(data) {
data.map(val => {
resultArr.push(val)
if (val.children && val.children.length > 0) {
treeToData(val.children)
delete val.children
}
})
return resultArr;
}
console.log(treeToData(arr));
方法二
使用reduce的累加,将遍历好的数据放在account里面,一开始account没有数据,所以是空数组,将当前的数据添加进来,判断有没有子级,有就递归调用方法,将返回来的数据合并
const arr = [
{
id: '1',
name: '1_1',
children: [
{ id: 'a', name: '1_1_1' },
{ id: 'b', name: '1_1_2' },
]
},
{
id: '2',
name: '2_2',
children: [
{ id: 'a', name: '2_2_2' }
]
}
]
function treeToData(data, parentId = null) {
return data.reduce((account, current) => {
account.push({ ...current, parentId })
if (current.children) {
account = account.concat(treeToData(current.children, current.id))
}
return account
}, [])
}
console.log(treeToData(arr));
方法三
方法三和方法二比较像,只是换一种遍历
const arr = [
{
id: '1',
name: '1_1',
children: [
{ id: 'a', name: '1_1_1' },
{ id: 'b', name: '1_1_2' },
]
},
{
id: '2',
name: '2_2',
children: [
{ id: 'a', name: '2_2_2' }
]
}
]
function treeToData(data, parentId = null) {
let resultArr = []
for (let i = 0; i < data.length; i++) {
resultArr.push({ ...data[i], parentId })
if (data[i].children) {
resultArr = resultArr.concat(treeToData(data[i].children, data[i].id))
}
}
return resultArr
}
console.log(treeToData(arr));
扁平数据转树状
方法一
先判断是不是父级,定义一个中间变量存储该数据,如果是就递归拿到所有的子级挂载在这个临时变量上,最后将临时变量添加到最终结果上
const arr = [
{ id: '1', name: '1_1', parentId: null },
{ id: '2', name: '1_1_1', parentId: '1' },
{ id: '2', name: '1_1_2', parentId: '1' },
{ id: '3', name: '1_2', parentId: null },
{ id: '4', name: '1_2_1', parentId: '3' },
{ id: '5', name: '1_2_1_1', parentId: '4' }
]
function dataToTree(data, parentId) {
const resultArr = []
let temp;
for (let i = 0; i < data.length; i++) {
if (data[i].parentId === parentId) {
const obj = data[i];
temp = dataToTree(data, data[i].id);
if (temp.length > 0) {
obj.children = temp;
}
resultArr.push(obj);
}
}
return ersultArr;
}
console.log(dataToTree(arr, null));
方法二
使用 filter() 函数过滤出所有的父节点,,再使用map去构造子节点,并且递归填充子节点
const arr = [
{ id: '1', name: '1_1', parentId: null },
{ id: '2', name: '1_1_1', parentId: '1' },
{ id: '2', name: '1_1_2', parentId: '1' },
{ id: '3', name: '1_2', parentId: null },
{ id: '4', name: '1_2_1', parentId: '3' },
{ id: '5', name: '1_2_1_1', parentId: '4' }
]
function dataToTree(data, parentId) {
const children = data.filter(val => val.parentId === parentId)
if (!children) {
return null
}
return children.map(item => (
{
...item,
children: dataToTree(data, item.id)
}
));
}
console.log(dataToTree(arr, null));
以上就是关于JS实现扁平数据和树状数据相互转换相关的全部内容,希望对你有帮助。欢迎持续关注潘子夜个人博客(www.panziye.com),学习愉快哦!