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

Posted sunny123456

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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树形结构转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript递归树形扁平数组笔试题reduceforEachconcat

目录

1、数据源

1.1、扁平数组

let flatOriginData = [
     id: 5, parentId: 2, name: "目录1-1-1", ,
     id: 1, parentId: 0, name: "目录1", ,
     id: 13, parentId: 9, name: "目录2-2-3", ,
     id: 3, parentId: 1, name: "目录1-2", ,
     id: 2, parentId: 1, name: "目录1-1", ,
     id: 12, parentId: 9, name: "目录2-2-2", ,
     id: 4, parentId: 1, name: "目录1-3", ,
     id: 7, parentId: 0, name: "目录2", ,
     id: 9, parentId: 7, name: "目录2-2", ,
     id: 6, parentId: 2, name: "目录1-1-2", ,
     id: 11, parentId: 9, name: "目录2-2-1", ,
     id: 8, parentId: 7, name: "目录2-1", ,
     id: 10, parentId: 7, name: "目录2-3", ,
];

1.2、JSON树形

let treeOriginData = [
    
        id: 1, parentId: 0, name: "目录1",
        children: [
             id: 3, parentId: 1, name: "目录1-2" ,
            
                id: 2, parentId: 1, name: "目录1-1",
                children: [
                     id: 5, parentId: 2, name: "目录1-1-1" ,
                     id: 6, parentId: 2, name: "目录1-1-2" 
                ]
            ,
             id: 4, parentId: 1, name: "目录1-3" 
        ]
    ,
    
        id: 7, parentId: 0, name: "目录2",
        children: [
            
                id: 9, parentId: 7, name: "目录2-2",
                children: [
                     id: 13, parentId: 9, name: "目录2-2-3" ,
                     id: 12, parentId: 9, name: "目录2-2-2" ,
                     id: 11, parentId: 9, name: "目录2-2-1" 
                ]
            ,
             id: 8, parentId: 7, name: "目录2-1" ,
             id: 10, parentId: 7, name: "目录2-3" 
        ]
    
];

2、题目

2.1、题目一

通过代码不全实现扁平数组结构转成JSON树形结构。parentId属性记录的是父级id值。

function convert(list) 
    // 补全代码
	let map = ,
        result = [];

        list.forEach(item => map[item.id] = item);

        list.forEach(item => 
            let parent = map[item.parentId];

            if (parent) 
                parent.children = parent.children || [];
                parent.children.push(item);
             else 
                result.push(item);
            
        );

        return result;


// 输出结果
console.log('convert:', convert(flatOriginData));

2.2、题目二

1、给树形的每一项添加age属性/字段，age属性值为1~10的随机数。
2、把数字类型的parentId属性的值改为字符串类型。

function treeRecursion(data) 
    // 补全代码
	for (const key in data) 
    	if (Object.hasOwnProperty.call(data, key)) 
            let item = data[key];

            if (key === 'id') (data['age'] = Math.round(Math.random() * 10), data.parentId = data.parentId.toString());

            if (typeof item === 'object') treeRecursion(item);
        
    

    return data;


// 输出结果
console.log('treeRecursion:', treeRecursion(treeOriginData));

2.3、题目三

通过代码补全实现JSON树形结构转成扁平数组结构，每一项数据不能出现多余的children子项。

function flatten(arr) 
    // 补全代码
	return arr.reduce((par, cur) => 
    	let  id, name, parentId, children = []  = cur;
        return par.concat([ id, name, parentId ], children.length ? flatten(children) : []);
    , []);


// 输出结果
console.log('flatten:', flatten(treeOriginData));

2.4、题目四

根据id获取树形对应数据项，也就是根据id进行数据查找、搜索、查询，找不到返回undefined。

function findItemById(list, id) 
	// 补全代码
	let res = list.find(item => item.id === id),
        result = undefined;

    if (!res) 
        list.forEach(item => 
            res = findItemById(item.children ? item.children : [], id);

            if (res) (delete res.children, result = res);

        );
     else 
        delete res.children;
        result = res;
    

    return result;


// 输出结构
console.log('findItemById:', findItemById(treeOriginData, 10));

2.5、题目五

根据子级id获取父级id，直至顶级id为止。

function funRecursion(list, id) 
    // 补全代码
	for (const key in list) 
		if (Object.hasOwnProperty.call(list, key)) 
			if (list[key].id === id) return [list[key].id];
			let res = funRecursion(list[key].children ? list[key].children : [], id);
			if (res) return res.concat([list[key].id]);
		
	
;

// 输出结果/原始输出
console.log(funRecursion(treeOriginData, 5));

以上是关于Javascript中扁平化数据结构与JSON树形结构转换详解的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript 扁平与树形数组数据的转换

JavaScript扁平数组结构转换成JSON树形结构无限极forEachpushchildren

JavaScript递归树形扁平数组笔试题reduceforEachconcat

web前端之JavaScript的插件下载指令及介绍npminstallsaverequire

什么是网站的扁平结构与树形结构

js把树形数据转成扁平数据