js-数组转树型结构

什么是数组转树型结构:
将数组中的元素按照特定规则组织成一个树形结构,专业术语是数组转树。

具体实现方式可能因情况而异，但通常需要考虑以下几个要素：

1. 数组中元素的顺序和位置如何影响树的结构；
2. 树的节点应包含哪些信息，例如值、子节点等；
3. 如何确定每个节点的父节点和子节点的索引或指针；
4. 如何处理数组中缺失的节点或空值。
   在实际应用中，可能还需要考虑对树进行遍历、搜索等操作的效率问题。

应用场景: 比如前端开发中的菜单导航、商品分类等。

实现数组转树型结构的一般思路是：

1. 遍历数组，将每个元素转换为树节点对象（通常包含 id 和 parentId 等属性）。
2. 将所有节点按照 parentId 属性进行分组，形成一个以 parentId 为键、以对应节点数组为值的字典。
3. 找到根节点（即没有父节点或其父节点不在数组中的节点），并递归构建整个树形结构。

下面是一个基于 JavaScript 的示例代码实现：

function arrayToTree(list, parentId = null) {
  const arr = []
  list.forEach(item => {
    if (item.pid === parentId) {
      // 找到了匹配的节点
      // 当前节点的id 和 当前节点的子节点的pid是相等的
      const children = transListToTreeData(list, item.id) 
      // 找到的节点的子节点
      item.children = children
      arr.push(item)
    }
  })
  return arr
}

// 使用示例
const array = [
  { id: 1, name: 'A', parentId: null },
  { id: 2, name: 'B', parentId: 1 },
  { id: 3, name: 'C', parentId: 1 },
  { id: 4, name: 'D', parentId: 2 },
  { id: 5, name: 'E', parentId: 2 },
  { id: 6, name: 'F', parentId: 3 },
  { id: 7, name: 'G', parentId: null }
];

const tree = arrayToTree(array, null);

console.log(tree);

在上述代码中，arrayToTree 函数接收一个数组和可选的 parentId 参数，用于指定父节点的 id 值。在函数内部，首先判断数组中的 id 跟 parentId 是否相等,相等的就将对象添加到此对象的子数组中,在当中定义的 arr 就是筛选出来的数组,再重新调用一下 arrayToTree 函数构建子树,最后返回包含当前节点以及其子树的对象。

示例代码运行结果如下：

[
  {
    "id": 1,
    "name": "A",
    "parentId": null,
    "children": [
      {
        "id": 2,
        "name": "B",
        "parentId": 1,
        "children": [
          {
            "id": 4,
            "name": "D",
            "parentId": 2,
            "children": []
          },
          {
            "id": 5,
            "name": "E",
            "parentId": 2,
            "children": []
          }
        ]
      },
      {
        "id": 3,
        "name": "C",
        "parentId": 1,
        "children": [
          {
            "id": 6,
            "name": "F",
            "parentId": 3,
            "children": []
          }
        ]
      }
    ]
  },
  {
    "id": 7,
    "name": "G",
    "parentId": null,
    "children": []
  }
]

总结: 数组转树型结构是封装一个函数来进行对数据的筛选, 将筛选出来的对象添加到父节点的子节点上,并且再调用一下此函数,形成递归,就可以实现数组转树,这样在拿到平铺数据时就可以得到嵌套数据了。