文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

不废话,直接开干

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

上思想: 思想:采用递归,每个对象都有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 
}

总结

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯