将连接元素数组转换为树

Question

给定一个连接元素数组，我如何创建一个子数组？

const array = [
  {id: "dndnode_0", ...},
  {id: "dndnode_1", ...},
  {id: "dndnode_2", ...},
  {id: "dndnode_3", ...}
]

const connections = [
  {source:'dndnode_0', target:'dndnode_1'},
  {source:'dndnode_0', target:'dndnode_2'},
  {source:'dndnode_2', target:'dndnode_3'},
]

我正在使用react-flow-renderer 库顺便说一句。

我想要这样的东西

const array = [
  {
    id: "dndnode_0", 
    children: [
      {id: "dndnode_1", ...},
      {id: "dndnode_2", ...}
    ]
  },
  {
    id: "dndnode_2",
    children: [
      {id: "dndnode_3", ...}
    ]
  }
]

Answer 1

您可以构建一个以节点 ID 为键的映射，其中对应的值是具有附加（空）children 属性的节点对象。

然后在迭代连接时填充那些children 属性。

最终从该映射中获取值，并且可选择只保留具有子节点的节点：

const nodes = [
  {id: "dndnode_0" },
  {id: "dndnode_1" },
  {id: "dndnode_2" },
  {id: "dndnode_3" }
]


const connections = [
  {source:'dndnode_0', target:'dndnode_1'},
  {source:'dndnode_0', target:'dndnode_2'},
  {source:'dndnode_2', target:'dndnode_3'},
]

const map = new Map(nodes.map(node => [node.id, {...node, children: []}]));
for (const {source, target} of connections) map.get(source).children.push(target);
const tree = [...map.values()].filter(node => node.children.length);

console.log(tree);