使用js实现平行数组数据结构转树状数据结构
  gHLnXgm5qDTb 2023年12月08日 34 0

在JavaScript中,你可以通过递归的方式将平行数组(数组中的每个元素也是一个数组)转换为树状数据结构。以下是一个简单的示例,假设我们的平行数组具有idparentId属性,我们可以通过以下方式将其转换为树状数据结构:

javascript复制代码
 function arrayToTree(arr) {  
 
     const map = {}; // 创建一个映射对象,用于根据id查找节点  
 
     const tree = []; // 这个数组将包含转换后的树  
 
   
 
     // 首先,遍历输入数组,将每个节点放入映射对象中  
 
     arr.forEach(node => {  
 
         map[node.id] = { ...node, children: [] };  
 
     });  
 
   
 
     // 然后,再次遍历输入数组,将每个节点放入它的父节点的children数组中  
 
     arr.forEach(node => {  
 
         const parent = map[node.parentId];  
 
         if (parent) {  
 
             parent.children.push(map[node.id]);  
 
         } else {  
 
             // 如果父节点不存在,那么这个节点就是根节点  
 
             tree.push(map[node.id]);  
 
         }  
 
     });  
 
   
 
     return tree;  
 
 }

这个函数接受一个平行数组作为输入,然后返回一个树状数据结构。你可以像下面这样使用它:

javascript复制代码
 const flat = [  
 
     { id: 1, parentId: null },  
 
     { id: 2, parentId: 1 },  
 
     { id: 3, parentId: 1 },  
 
     { id: 4, parentId: 2 },  
 
     { id: 5, parentId: 3 }  
 
 ];  
 
   
 
 const tree = arrayToTree(flat);  
 
 console.log(JSON.stringify(tree, null, 2));

这将输出以下树状数据结构:

json复制代码
 [  
 
   {  
 
     "id": 1,  
 
     "parentId": null,  
 
     "children": [  
 
       {  
 
         "id": 2,  
 
         "parentId": 1,  
 
         "children": [  
 
           {  
 
             "id": 4,  
 
             "parentId": 2,  
 
             "children": []  
 
           }  
 
         ]  
 
       },  
 
       {  
 
         "id": 3,  
 
         "parentId": 1,  
 
         "children": [  
 
           {  
 
             "id": 5,  
 
             "parentId": 3,  
 
             "children": []  
 
           }  
 
         ]  
 
       }  
 
     ]  
 
   }  
 
 ]
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年12月08日 0

暂无评论

推荐阅读
  f18CFixvrKz8   2024年05月20日   87   0   0 JavaScript
  fxrR9b8fJ5Wh   2024年05月17日   50   0   0 JavaScript
  2xk0JyO908yA   2024年04月28日   37   0   0 JavaScript
gHLnXgm5qDTb