前端笔试题：数组转树形结构

molyzzx 发布于2019-08-23 15:54 / 1093人阅读

摘要：初始化数据输出结果转换函数这个转换函数不受数据关系层级的限制，无论有多少层关系，只要一次循环就能搞定。所有人拿一根线，从他自己的位置开始，走到他父亲的位置，那么这个树形结构就完成了。只要每个节点都做完了，树形就出来了。

初始化数据

</>复制代码 
var data = [
    { parentId: 0, id: 1, value: "1" },
    { parentId: 3, id: 2, value: "2" },
    { parentId: 0, id: 3, value: "3" },
    { parentId: 1, id: 4, value: "4" },
    { parentId: 1, id: 5, value: "5" }
]

输出结果

</>复制代码 
[
  {
    id:1,
    value:"1",
    children:[
      {id:4,value:"4",children:[]},
      {id:5,value:"5",children:[]}
    ]
  },{
    id:3,
    value:"3",
    children:[
      {id:2,value:"2",children:[]}
    ]
  }
]

转换函数

</>复制代码 
function convertArrayToTree(arr){
  let 
    idsMap = {}, 
    result = [],
    node,
    parentNode,
    item, 
    j,
    leng = arr.length;
  for(j = 0; j <= leng; j++ ){
    
    item = arr[j];
    if(!idsMap["$"+ item.id]){
      node = {id: item.id, children: []}
      idsMap["$"+ item.id] = node;
    }else{
       node = idsMap["$"+ item.id]; 
    }
    node.value = item.value;
    
    if(item.parentId === 0){
       result.push(node);
    }else{
      if(!idsMap["$"+ item.parentId]){
        parentNode = {id: item.parentId, children: []}
        idsMap["$"+ item.parentId] = parentNode;
      }else{
        parentNode = idsMap["$"+ item.parentId];
        
      }
      parentNode.children.push(node);
    }
  }
  return result;
}

这个转换函数不受数据关系层级的限制，无论有多少层关系，只要一次循环就能搞定。假如一群人都是爷爷、父亲、儿子、孙子的关系，每个人只知道自己的位置和他父亲的位置。所有人拿一根线，从他自己的位置开始，走到他父亲的位置，那么这个树形结构就完成了。

在这里，我们用一个 idsMap 比喻这样的集合，id 作位健值。每个节点有自己和他父节点 id，找到父节点，然后把他自己 push 到父节点的 children 中。

只要每个节点都做完了，树形就出来了。

GPU云服务器云服务器前端笔试题前端基础js笔试题笔试题大数据笔试题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102533.html

前端 100 问：能搞懂80%的请把简历给我

摘要：解析第题第题为什么的和的中不能做异步操作解析第题第题京东下面代码中在什么情况下会打印解析第题第题介绍下及其应用。尽量减少操作次数。解析第题第题京东快手周一算法题之两数之和给定一个整数数组和一个目标值，找出数组中和为目标值的两个数。引言半年时间，几千人参与，精选大厂前端面试高频 100 题，这就是「壹题」。在 2019 年 1 月 21 日这天，「壹题」项目正式开始，在这之后每个工...

Scott 2019-08-23 18:35 评论0 收藏0
前端开发笔试题（一）

摘要：之前的项目中使用了什么前端方法对页面性能进行优化，有什么心得。随记这是我去咪咕数媒面试的时候的笔试题目，因为咪咕基本上都是移动端的项目，所以这里的题目比较偏向于移动端。一、不定项选择题（共25分，每题5分） 1、下列语句中能够正确的在一个HTML页面中导入在同一目录下的StyleSheet1.css样式表的是（） ...

lemanli 2019-08-29 15:35 评论0 收藏0
前端开发笔试题（一）

摘要：之前的项目中使用了什么前端方法对页面性能进行优化，有什么心得。随记这是我去咪咕数媒面试的时候的笔试题目，因为咪咕基本上都是移动端的项目，所以这里的题目比较偏向于移动端。一、不定项选择题（共25分，每题5分） 1、下列语句中能够正确的在一个HTML页面中导入在同一目录下的StyleSheet1.css样式表的是（） ...

chuyao 2019-08-26 11:58 评论0 收藏0
前端开发笔试题（一）

摘要：之前的项目中使用了什么前端方法对页面性能进行优化，有什么心得。随记这是我去咪咕数媒面试的时候的笔试题目，因为咪咕基本上都是移动端的项目，所以这里的题目比较偏向于移动端。一、不定项选择题（共25分，每题5分） 1、下列语句中能够正确的在一个HTML页面中导入在同一目录下的StyleSheet1.css样式表的是（） ...

luckyyulin 2019-08-02 10:36 评论0 收藏0
前端笔试题面试题记录（上）

摘要：后续前端笔试题面试题记录下小结我想说的是在找工作期间，肯定有自己发挥不好，或者不会的问题，一定要在晚上的时候自己再学习总结一下，在一个问题上面尽量不要栽倒两次，学到了的才是自己的。前言过完元宵，就到上海找了波工作，现在已经入职好了，蹭波热点，写一波面试记录，内容包含笔试题和面试题，还有一些没有写进来，准备再开一篇，许久没写了，写的确实有些慢。如果喜欢的话可以点波赞，或者关注一下，希...

wind3110991 2019-08-30 14:10 评论0 收藏0