JavaScript中将数组转换为树形数组适配PrimeReact组件

我有一个对象数组，需要把它转换成PrimeReact组件可用的树形数组。输入数据里每个对象的children字段是子节点ID数组，转换后children要变成对应的完整子对象；每个节点只保留key、data、children三个字段，其中data包含name、type、label、function属性。我已经完成了基础的数据结构转换，但不知道怎么构建树形结构，以下是输入数据、期望输出和我尝试的代码：

输入数据 #

[
  {
    name: "My name",
    Myid: "1",
    children: [],
    type: "type1",
    label: "Mylabel",
    function: "myfunction",
  },
  {
    name: "Name2",
    Myid: "2",
    children: [],
    type: "Type2",
    label: "Mylabel",
    function: "myfunction",
  },
  {
    name: " Another Name",
    Myid: "3",
    children: ["1", "2"],
    type: "this is my type",
    label: "My label 4",
    function: "Functional Component",
  },
  {
    name: "Name3",
    Myid: "5",
    children: [],
    type: "Type3",
    label: "Mylabel3",
    function: "myfunction3",
  },
  {
    name: "Name6",
    Myid: "6",
    children: ["3"],
    type: "Type6",
    label: "Mylabel6",
    function: "myfunction6",
  },
];

期望输出 #

const output = [
  {
    key: "5",
    data: {
      name: "Name3",
      type: "Type3",
      label: "Mylabel3",
      function: "myfunction3",
    },
    children: [],
  },
  {
    key: "6",
    data: {
      name: "Name6",
      type: "Type6",
      label: "Mylabel6",
      function: "myfunction6",
    },
    children: [
      {
        key: "3",
        data: {
          name: " Another Name",
          type: "this is my type",
          label: "My label 4",
          function: "Functional Component",
        },
        children: [
          {
            key: "1",
            data: {
              name: "My name",
              type: "type1",
              label: "Mylabel",
              function: "myfunction",
            },
            children: [],
          },
          {
            key: "2",
            data: {
              name: "Name2",
              type: "Type2",
              label: "Mylabel",
              function: "myfunction",
            },
            children: [],
          },
        ],
      },
    ],
  },
];

尝试代码 #

const manip = data?.map((el) => {
  return {
    key: el.Myid,
    data: {
      layer: el.layer,
      label: el.label,
      name: el.name,
      type: el.type,
    },
    children: el.children,
  };
});

console.log(manip)

要实现树形结构转换，核心是先把所有节点用ID映射存储以快速查找，再替换子ID为对应子对象，最后筛选出无父节点的根节点。完整代码如下：

function convertToPrimeReactTree(data) {
  // 1. 创建ID到转换后节点的映射，快速查找
  const nodeMap = new Map();
  data.forEach(item => {
    const convertedNode = {
      key: item.Myid,
      data: {
        name: item.name,
        type: item.type,
        label: item.label,
        function: item.function
      },
      children: []
    };
    nodeMap.set(item.Myid, convertedNode);
  });

  // 2. 为每个节点填充子节点
  data.forEach(item => {
    const currentNode = nodeMap.get(item.Myid);
    item.children.forEach(childId => {
      const childNode = nodeMap.get(childId);
      if (childNode) {
        currentNode.children.push(childNode);
      }
    });
  });

  // 3. 筛选根节点：未被任何节点作为子节点的节点
  const allChildIds = new Set();
  data.forEach(item => {
    item.children.forEach(id => allChildIds.add(id));
  });
  return Array.from(nodeMap.values()).filter(node => !allChildIds.has(node.key));
}

// 测试调用
const inputData = [
  {
    name: "My name",
    Myid: "1",
    children: [],
    type: "type1",
    label: "Mylabel",
    function: "myfunction",
  },
  {
    name: "Name2",
    Myid: "2",
    children: [],
    type: "Type2",
    label: "Mylabel",
    function: "myfunction",
  },
  {
    name: " Another Name",
    Myid: "3",
    children: ["1", "2"],
    type: "this is my type",
    label: "My label 4",
    function: "Functional Component",
  },
  {
    name: "Name3",
    Myid: "5",
    children: [],
    type: "Type3",
    label: "Mylabel3",
    function: "myfunction3",
  },
  {
    name: "Name6",
    Myid: "6",
    children: ["3"],
    type: "Type6",
    label: "Mylabel6",
    function: "myfunction6",
  },
];

const output = convertToPrimeReactTree(inputData);
console.log(output);

代码说明 #

• 节点映射：遍历输入数据，将每个节点转换为目标结构后存入Map，用Myid作为键，保证后续查找子节点的效率。
• 填充子节点：再次遍历输入数据，根据每个节点的子ID数组，从映射中取出对应子节点并添加到当前节点的children数组。
• 筛选根节点：收集所有被作为子节点的ID，筛选出不在该集合中的节点，这些就是树形结构的顶层根节点。

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