sunny123456

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
Javascript中扁平化数据结构与JSON树形结构转换详解

Javascript中扁平化数据结构与JSON树形结构转换详解
原文链接：https://www.jb51.net/article/247525.htm

不废话，直接开干

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

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

上代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//已知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树状形结构

思想都在步骤里了。

老规矩上代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
  //已知扁平化数据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（对象）使用时会报错，在数组是可以拿到数组元素。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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
}

总结

到此这篇关于Javascript中扁平化数据结构与JSON树形结构转换的文章就介绍到这了,更多相关js扁平化与JSON树形结构转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
posted on 2023-04-06 08:48  sunny123456  阅读(292)  评论(0)    收藏  举报