JavaScript中数组怎么转化为树的结构

前言

大家在工作中，应该有遇到把一个数组转换为一个树的结构的问题。比如树形菜单，或者这个问题成为大家面试的时候，面试官会问你的问题。但不管是因为那种原因遇到的，我们都要把它理解明白。

进入主题

我们来看这样的一个对象数组，需要把这个数组转为对象数组。

var arr = [
   { id: 0, name: "华哥", sex: "男" },
   { id: 1, name: "龙哥", sex: "男" },
   { id: 2, name: "A弟弟", sex: "男", pid: 0 },
   { id: 3, name: "B弟弟", sex: "男", pid: 1 },
   { id: 4, name: "老板", sex: "男" },
   { id: 5, name: "C弟弟", sex: "男", pid: 4 },
]

方法一：用递归实现

function getArr(arr,id){
  let tempArr= [];
  for(const item of arr){
      if(item.parentid === id){
            tempArr.push({...item,children:getArr(arr,item.id)})
      }
   }
   return tempArr;
}
console.log(getArr(arr,undefined));

这种方法，代码量比较少，而且容易去理解，适合大多数人。缺点也很明显，就是随着数据量的增加的话，他耗费的时间就会越来越多。

方法二: 不用递归实现

用双层for循环的方式

function getArr(items) {
     const result = [];   // 存放结果集
     const itemMap = {};
     for (const item of items) {
         itemMap[item.id] = { ...item, children: [] }
      }
      for (const item of items) {
           const id = item.id;
           const pid = item.pid;
           const treeItem = itemMap[id];
           if (pid === undefined) {
                result.push(treeItem)
            } else {
               if (!itemMap[id]) {
                  itemMap[pid] = {
                      children: [],
               }
            }
          itemMap[pid].children.push(treeItem)
        }
     }
    return result;
}
console.log(getArr(arr));

方式三：目前的最优解

用了一层循环。

function getArr(items) {
     const result = [];
     const itemMap = {};
     for (const item of items) {
         const id = item.id;
         const pid = item.pid;
         if (!itemMap[id]) {
             itemMap[id] = {
                children: [],
                }
         }
         itemMap[id] = {
             ...item,
             children: itemMap[id]['children']
         }
         const treeItem = itemMap[id];
         if (pid === undefined) {
               result.push(treeItem);
         } else {
         if (!itemMap[pid]) {
             itemMap[pid] = {
               children: [],
            }
         }
        itemMap[pid].children.push(treeItem)
      }
   }
   return result;
}
console.log(getArr(arr));

结束语

以上就是我对于JS中数组转为树的三种方法的介绍，不过大同小异。实现的功能都是一样的，只是实现的功能的时间和占用的空间是不一样的。大家有不同的看法可以留言。