扁平化的数组转为树状数组

最新推荐文章于 2024-07-28 18:19:21 发布

一只小菜鳥

最新推荐文章于 2024-07-28 18:19:21 发布

阅读量111

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/Keep_Slience/article/details/139170349

版权

之前也有些过树状数据转为扁平化的数组，这就不多阐述了，又想了解的可以翻下我之前的文章。这个是我去年的面试题，当时也没写出来，一是菜，二是也紧张。

let arr = [
  { name: 1, parentId: null, id: 1 },
  { name: 2, parentId: null, id: 2 },
  { name: 3, parentId: 1, id: 3 },
  { name: 4, parentId: 3, id: 4 },
  { name: 5, parentId: null, id: 5 },
  { name: 6, parentId: 5, id: 6 },
  { name: 7, parentId: 5, id: 7 },
];
function flatToTree(data) {
  var res = [];
  // 创建 map集合
  var map = new Map(data.map(item => [item.id, item]));
  data.forEach(item => {
    var parentItem = map.get(item.parentId);
    if (parentItem) {
      (parentItem.children ??= []).push(item);
    } else {
      res.push(item);
    }
  });
  return res;
}
console.log(flatToTree(arr));
// [
//   {
//       "name": 1,
//       "parentId": null,
//       "id": 1,
//       "children": [
//           {
//               "name": 3,
//               "parentId": 1,
//               "id": 3,
//               "children": [
//                   {
//                       "name": 4,
//                       "parentId": 3,
//                       "id": 4
//                   }
//               ]
//           }
//       ]
//   },
//   {
//       "name": 2,
//       "parentId": null,
//       "id": 2
//   },
//   {
//       "name": 5,
//       "parentId": null,
//       "id": 5,
//       "children": [
//           {
//               "name": 6,
//               "parentId": 5,
//               "id": 6
//           },
//           {
//               "name": 7,
//               "parentId": 5,
//               "id": 7
//           }
//       ]
//   }
// ]