如何将数组对象组成的树状嵌套结构转为带id与parentId的扁平化列表

需求说明 #

现有树状嵌套结构的接口返回数据，每个节点包含label、value属性，存在子节点时会携带children数组。需要将该嵌套结构转换为一维扁平化数组，规则如下：

• 每个节点对应扁平化数组中的一个对象，新增自增唯一主键id
• 一级根节点的parentId固定为null
• 非根节点的parentId为其父节点的id值

原结构示例 #

[{
  label: "search me",
  value: "searchme",
  children: [{
    label: "search me too",
    value: "searchmetoo",
    children: [{
      label: "No one can get me",
      value: "anonymous",
    }],
  }],
}, {
  label: "search me2",
  value: "searchme2",
  children: [{
    label: "search me too2",
    value: "searchmetoo2",
    children: [{
      label: "No one can get me2",
      value: "anonymous2",
    }],
  }],
}]

目标结构示例 #

[{
  id: 1,                // DIAGID
  parentId: null,       // PARENTID
  label: "search me",   // DIAGNOSIS
  value: "searchme"     // DIAGTYPE
}, {
  id: 2,
  parentId: 1,
  label: "search me too",
  value: "searchmetoo"
}, {
  id: 3,
  parentId: 2,
  label: "No one can get me",
  value: "anonymous"
}, {
  id: 4,
  parentId: null,
  label: "search me2",
  value: "searchme2"
}, {
  id: 5,
  parentId: 4,
  label: "search me too2",
  value: "searchmetoo2"
}, {
  id: 6,
  parentId: 5,
  label: "No one can get me2",
  value: "anonymous2"
}]

实现代码 #

采用深度优先遍历的递归方案实现，支持任意层级的嵌套结构：

function treeToFlat(tree) {
  let result = []
  let id = 1 // 自增id初始值，可按需调整生成规则
  // 递归遍历函数
  const traverse = (nodes, parentId) => {
    nodes.forEach(node => {
      // 构造当前节点的扁平化对象
      const flatNode = {
        id: id++,
        parentId: parentId,
        label: node.label,
        value: node.value
      }
      result.push(flatNode)
      // 存在子节点则递归处理，父id为当前节点id
      if(node.children && node.children.length) {
        traverse(node.children, flatNode.id)
      }
    })
  }
  // 初始遍历根节点，父id为null
  traverse(tree, null)
  return result
}

// 调用示例
// const flatData = treeToFlat(原始树结构数据)

补充说明 #

如果需要保留节点的其他自定义属性，或者替换为UUID、雪花算法等id生成规则，直接修改flatNode的构造逻辑即可。

内容的提问来源于stack exchange，提问作者SunnyCave