如何将TreeView所有层级子项整理到父节点的子列表中？

需求是将树形结构中每个父节点下所有层级的子节点，都直接整理到该父节点的直接子列表中，同时子节点不再保留自身的子节点数据。

输入示例 #

[
  {label:"A",child:[{label:"B",child:[{label:"C",child:[]}]}]}
]

期望输出 #

[
  {label: "A",child: [{label:"B"},{label:"C" } ]}
]

问题分析 #

你当前的代码仅处理了当前节点的直接子节点，没有递归遍历深层的子节点，所以无法收集到所有层级的后代节点。

解决方案 #

可以通过递归函数遍历每个节点的所有后代，收集后重新构造节点结构：

// 递归收集节点的所有后代（不含自身）
function collectDescendants(node) {
  let descendants = [];
  // 如果当前节点有子节点，遍历处理
  if (node.child && node.child.length > 0) {
    for (const child of node.child) {
      // 先把当前子节点（仅保留label）加入列表
      descendants.push({ label: child.label });
      // 递归收集该子节点的后代，合并到列表中
      descendants = [...descendants, ...collectDescendants(child)];
    }
  }
  return descendants;
}

// 处理整个树形数组
function flattenTree(tree) {
  return tree.map(node => {
    // 收集当前节点的所有后代
    const allChildren = collectDescendants(node);
    // 返回新的节点结构
    return {
      label: node.label,
      child: allChildren
    };
  });
}

// 测试示例
const input = [
  {label:"A",child:[{label:"B",child:[{label:"C",child:[]}]}]}
];

const output = flattenTree(input);
console.log(output);

代码说明 #

1. collectDescendants 函数：递归遍历节点的所有子节点，收集每个子节点（仅保留label属性），同时递归收集子节点的后代，最终返回所有后代的数组。
2. flattenTree 函数：遍历整个树形数组，对每个节点调用collectDescendants获取所有后代，构造新的节点对象，替换原有的child列表。

这样处理后，就能得到你期望的扁平化结构。

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