通过递归,实现数组转树

一 ，为什么需要数组转树：

      当我们做后台管理系统时难免会遇到关于公司组织架构这样的模块，一个部门下会有好几个小部门，这时我们就可以运用树形图来更好地进行查看，下面简单举例。

将数组

const arr =  [

  { 'id': 1, 'pid': 0, 'name': '生鲜' },

  { 'id': 2, 'pid': 1, 'name': '水果' },

  { 'id': 3, 'pid': 2, 'name': '苹果' },

  { 'id': 4, 'pid': 2, 'name': '雪梨' },

  { 'id': 5, 'pid': 1, 'name': '蔬菜' },

  { 'id': 6, 'pid': 1, 'name': '肉类' },

  { 'id': 7, 'pid': 5, 'name': '茄子' },

  { 'id': 8, 'pid': 5, 'name': '菠菜' },

  { 'id': 9, 'pid': 6, 'name': '猪肉' },

  { 'id': 10, 'pid': 6, 'name': '牛肉' }

]

转换成

[

//     { 'id': 1, 'pid': 0, 'name': '生鲜',

//       children: [

//         { 'id': 2, 'pid': 1, 'name': '水果',

//                children: [{ 'id': 3, 'pid': 2, 'name': '苹果' },

//                                { 'id': 4, 'pid': 2, 'name': '雪梨' }]},

//         { 'id': 5, 'pid': 1, 'name': '蔬菜',

//                children: [{ 'id': 7, 'pid': 5, 'name': '茄子' },

//                                { 'id': 8, 'pid': 5, 'name': '菠菜' }]},

//         { 'id': 6, 'pid': 1, 'name': '肉类',

//                children: [{ 'id': 9, 'pid': 6, 'name': '猪肉' },

//                                { 'id': 10, 'pid': 6, 'name': '牛肉' }]},

//       ] }

//   ]

我的思路是使用一个递归来实现数组转树

export function arr2tree(arr, rootId) {
  const ar = []

  arr.forEach(it => {
    // 当前元素是子元素
    if (it.pid === rootId) {
      // 递归去找当前元素的子元素
      it.children = arr2tree(arr, it.id)
      ar.push(it)
    }
  })
  return ar
}

这个函数的主要目的是将给定的数组 arr 转换为一棵树形结构。这棵树将包含数组中每个元素的父节点 ID，以及每个元素本身作为节点。

让我们详细解释一下这个过程：

1. 首先，我们定义一个空数组 ar，用于存储树的节点。
2. 对于数组中的每个元素，我们检查其 ID 是否等于 rootId。如果是，我们递归调用 arr2tree 函数，将当前元素及其所有子节点作为新的节点添加到 ar 数组中。
3. 递归调用结束后，返回 ar 数组，这是转换后的树形结构。

这个函数的实现非常简单，但它的功能是将数组转换为树形结构。在实际应用中，这种数据结构可以用于组织和管理数据，例如用于表示一个人的家庭关系或者一家公司的组织结构。