Skip to content

buildTree

将扁平数组构建为树形结构

扁平数据

[
  {
    "id": 1,
    "name": "根节点1",
    "parentId": null
  },
  {
    "id": 2,
    "name": "子节点1-1",
    "parentId": 1
  },
  {
    "id": 3,
    "name": "子节点1-2",
    "parentId": 1
  },
  {
    "id": 4,
    "name": "孙节点1-1-1",
    "parentId": 2
  },
  {
    "id": 5,
    "name": "根节点2",
    "parentId": null
  },
  {
    "id": 6,
    "name": "子节点2-1",
    "parentId": 5
  }
]

树形结构

[
  {
    "id": 1,
    "name": "根节点1",
    "parentId": null,
    "children": [
      {
        "id": 2,
        "name": "子节点1-1",
        "parentId": 1,
        "children": [
          {
            "id": 4,
            "name": "孙节点1-1-1",
            "parentId": 2,
            "children": []
          }
        ]
      },
      {
        "id": 3,
        "name": "子节点1-2",
        "parentId": 1,
        "children": []
      }
    ]
  },
  {
    "id": 5,
    "name": "根节点2",
    "parentId": null,
    "children": [
      {
        "id": 6,
        "name": "子节点2-1",
        "parentId": 5,
        "children": []
      }
    ]
  }
]

函数签名

typescript
interface BuildTreeOptions {
  idKey?: string
  parentIdKey?: string
  childrenKey?: string
  rootParentId?: any
}

function buildTree<T>(items: T[], options?: BuildTreeOptions): T[]

参数

参数名类型必填说明
itemsT[]扁平数组
optionsBuildTreeOptions配置选项

返回值

类型说明
T[]树形结构数组

工作原理

  1. 创建ID映射表
  2. 为每个节点添加空的children数组
  3. 遍历所有节点建立父子关系
  4. 根据parentId将节点挂载到父节点
  5. parentId为null的节点作为根节点
  6. 返回根节点数组