扁平数据结构转Tree

看下题目：打平的数据内容如下：

let arr = [
    {id: 1, name: '部门1', pid: 0},
    {id: 2, name: '部门2', pid: 1},
    {id: 3, name: '部门3', pid: 1},
    {id: 4, name: '部门4', pid: 3},
    {id: 5, name: '部门5', pid: 4},
]
//输出结果
[
    {
        "id": 1,
        "name": "部门1",
        "pid": 0,
        "children": [
            {
                "id": 2,
                "name": "部门2",
                "pid": 1,
                "children": []
            },
            {
                "id": 3,
                "name": "部门3",
                "pid": 1,
                "children": [
                    // 结果 ,,,
                ]
            }
        ]
    }
]

不考虑性能实现，递归遍历查找

主要思路是提供一个递getChildren的方法，该方法递归去查找子集。 就这样，不用考虑性能，无脑去查，大多数人只知道递归，就是写不出来。。。

/**
 * 递归查找，获取children
 */
const getChildren = (data, result, pid) => {
  for (const item of data) {
    if (item.pid === pid) {
      const newItem = {...item, children: []};
      result.push(newItem);
      getChildren(data, newItem.children, item.id);
    }
  }
}

/**
* 转换方法
*/
const arrayToTree = (data, pid) => {
  const result = [];
  getChildren(data, result, pid)
  return result;
}

不用递归，也能搞定

主要思路是先把数据转成Map去存储，之后遍历的同时借助对象的引用，直接从Map找对应的数据做存储

function arrayToTree(items) {
  const result = [];   // 存放结果集
  const itemMap = {};  // 
    
  // 先转成map存储
  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 === 0) {
      result.push(treeItem);
    } else {
      if (!itemMap[pid]) {
        itemMap[pid] = {
          children: [],
        }
      }
      itemMap[pid].children.push(treeItem)
    }

  }
  return result;
}

最优性能

主要思路也是先把数据转成Map去存储，之后遍历的同时借助对象的引用，直接从Map找对应的数据做存储。不同点在遍历的时候即做Map存储,有找对应关系。性能会更好。

function arrayToTree(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 === 0) {
      result.push(treeItem);
    } else {
      if (!itemMap[pid]) {
        itemMap[pid] = {
          children: [],
        }
      }
      itemMap[pid].children.push(treeItem)
    }

  }
  return result;
}

简洁写法

方法一：

• 采用了复杂数据类型浅拷贝时赋值地址的特性
• 缺点：1.只能处理特定格式的数据；2.会改变原数据

let finArr = []
arr.forEach(element => {
    element.children = []
    if (element.pid === 0) {
        finArr.push(element)
    } else {
        arr.find(item => item.id == element.pid).children.push(element)
    }
});
console.log('finArr', finArr);

优化
解决了缺点2，依旧保留缺点1
造成缺点1的原因是element.children = []的是时机不对，那么将这段代码放置在其余操作之外，就可以将每个元素放到其父元素的children中，而不用考虑顺序的问题，于是出现了方案2

//深拷贝
let finArr = JSON.parse(JSON.stringify(arr))
finArr.forEach(element => {
    element.children = []
    if (element.pid !== 0) finArr.find(item => item.id == element.pid).children.push(element)
});
finArr = finArr[0]
console.log('finArr', finArr);
console.log('arr', arr);

方法2：
解决了方案1的两个缺点，但是使用了两个forEach

let finArr = JSON.parse(JSON.stringify(arr))
finArr.forEach(element => {
    element.children = []
});
finArr.forEach(element => {
    if (element.pid !== 0) finArr.find(item => item.id == element.pid).children.push(element)
});
finArr = finArr.find(item => item.pid == 0)
console.log('finArr', finArr);
console.log('arr', arr);

优化
前面的解决思路都是将每个元素push到父元素中，然后一条评论给了我灵感，为什么不找到每个元素的children然后直接赋值呢，这样也就解决了方案2的问题

let finArr = JSON.parse(JSON.stringify(arr))
finArr.forEach(element => {
    element.children = finArr.filter(item => item.pid == element.id)
});
finArr = finArr.find(item => item.pid == 0)
console.log('finArr', finArr);
console.log('arr', arr);

本文章参考了掘金：https://juejin.cn/post/6983904373508145189