树形json转换为java对象递归 json树结构数据扁平化

转载

mob6454cc6f6c1c 2023-08-17 23:14:23

文章标签 树形json转换为java对象递归 js 数据结构扁平化数组 文章分类 Java 后端开发

Javascript中扁平化数据结构与JSON树形结构转换详解

一. 先说简单的树形结构数扁平化处理

上思想：思想：采用递归，每个对象都有childern,只要有children属性提取出来将其放在空数组中然后将对象的其他属性解构出来，最后将数组合并

上代码：

//已知JSON树状形结构的数据data
let data = [
{id:1,title:'标题1',parent_id:0,},
{id:2,title:'标题2',parent_id:0,
children:[
{id:3,title:'标题2-1',parent_id:2,
children:[
{id:4,title:'标题3-1',parent_id:3,
children:[
{id:5,title:'标题4-1',parent_id:4}
]}
]},
{id:6,title:'标题2-2',parent_id:2}
]
}
],
 
function flat(data){
return data.reduce((pre,cur)=>{
// console.log(cur);
//此处将对象的children属性和值都解构在空数组中，将对象的其他属性和值都解构在i里面。
const {children=[],...i}=cur;   // 注意 ...i 只能写在解构赋值的末尾，否则报错
// console.log(i);
// // console.log(children);
return pre.concat([{...i}],flat(children))  //利用递归回调,数组合并,注意此处 {...i}是解构
},[]);
}
console.log(flat(data));

这里用到了 es6解构赋值和不常用的 Array.reduce,文章讲的不错，可以去看看。

二. 再讲将扁平化数据结构转JSON树状形结构

思想都在步骤里了。

老规矩上代码：

//已知扁平化数据Arr
let Arr = [
{id:1,title:'标题1',parent_id:0},
{id:2,title:'标题2',parent_id:0},
{id:3,title:'标题2-1',parent_id:2},
{id:4,title:'标题3-1',parent_id:3},
{id:5,title:'标题4-1',parent_id:4},
{id:6,title:'标题2-2',parent_id:2},
];
 
const result = []
function fn(list){
const remap = list.reduce((pre,cur)=>{  //###第一步：将数组转换成键值对的形式(键是id值，值是对象)
// console.log(cur);
pre[cur.id]=cur
// console.log(pre);
return pre
},{})
//console.log(remap);
//###第二步，循环遍历数组，判断是不是(树状结构最外层，祖宗层数据)第一层的数据(本处就是parent_id等不等于0)
for(let item of list){  //用普通的for循环也行，但是用for in 不行,只能获取数组的元素下标,或者对象的键
console.log(item);
if(item.parent_id===0){
result.push(item)
continue
}
// console.log(item.parent_id);
// console.log(remap[item.parent_id]); //注意 obj[key] 就代表是对象的值value
if(item.parent_id in remap) {   //换成else也可，目的将不是第一层的数据(parent_id不等于0)挑出来，并赋予一个children属性
const parent = remap[item.parent_id];
parent.children = parent.children || []; 
// console.log(parent);
parent.children.push(item);
//console.log(parent);
}
}
// console.log(result);
return result
}
console.log(fn(Arr));

扩充一个知识点：for in 与 for of 的区别：

for-in结构对 Array（数组）和Object（对象）都可以使用，但只能拿到数组元素下标或者对象的键；

而for-of结构在对Object（对象）使用时会报错，在数组是可以拿到数组元素。

const arr = [2,3,4]
const obj = {
a:2,
b:3,
c:4
},
 
for (let item in arr){
console.log(item);  // 0 , 1 , 2
}
 
for (let item of arr){
console.log(item);  // 2 , 3 , 4
}
 
for (let item in obj){
console.log(item)  // a ,b ,c
}
 
for (let item of obj ){
console.log(item)  // Uncaught TypeError: arr is not iterable 
}