小记,如何构建一颗路由树

93 阅读1分钟

面试小记:将一个数组转化为树(前端页面树状路由)的形式 输入:

let arr = [
    {id: 1, patientId: 0},
    {id: 2, patientId: 1},
    {id: 3, patientId: 1},
    {id: 4, patientId: 2},
    {id: 5, patientId: 2},
    {id: 6, patientId: 3},
    {id: 7, patientId: 3},
    {id: 8, patientId: 4}
]

输出:

  {
      id: 1,
      patientId: 0,
      children:[
          {id: 2, patientId: 1, children: [
              {id: 4, patientId:2, children:[]}
              {id: 5, patientId: 2, children:[]}
          ]},
          {id: 3, patientId: 1, children: [
          
          ]}
      ]
  }

代码:

let tree = {};
const findParent = function(id, tree) {
  if (tree.id === id) {
    return tree;
  } else {
    if (tree.children) {
      let len = tree.children.length;
      for (let i = 0; i < len; i++) {
        let item = tree.children[i];
        if (item.id === id) {
          return item;
        } else {
          if (item.children) {
            let parent = findParent(id, item);
            if (parent) {
              return parent;
            }
          }
        }
      }
    }
  }

}
const formataArrToTree = function(arr) {
  let len = arr.length;
  for (let i = 0; i < len; i++) {
    let item = arr[i];
    if (item.patientId === 0) {
      tree = item;
      arr.splice(i, 1);
      i--;
      len--;
    } else {
      let parent = findParent(item.patientId, tree);
      if (parent) {
        if (!parent.children) {
          parent.children = [];
        }
        parent.children.push(item);
        arr.splice(i, 1);
        i--;
        len--;
      }
    }
  }
  if (arr.length) {
    formataArrToTree(arr);
  }
}

写法2:

const arrTransverseTree = (arr) =>{
  let result = []
  let map = {}
  arr.forEach(item => {
    map[item.id] = item
  })
  arr.forEach(item => {
    let parent = map[item.parentId]
    if(parent){
      (parent.children || (parent.children = [])).push(item)
    }else{
      result.push(item)
    }
  })
  return result
}
let result = arrTransverseTree(arr);

写法3:

function nest(pid, arr){
  return arr.filter(item => item.parentId === pid).map(item => ({...item, children: nest(item.id, arr)}));
}