TS 实现平铺结构转化为树形结构

#javascript#snippets

需求

要将给定的平铺结构的 Item 数组转换为树形结构的 ITreeItem，你可以使用递归的方法来构建树。

代码

以下是一个可能的 TypeScript 实现示例：

interface Item {
  id: string;
  name: string;
  childrenId?: string[];
  parentId?: string;
}

interface ITreeItem extends Item {
  children?: ITreeItem[]
}

function buildMenuTree(items: Item[], parentId?: string): ITreeItem[] {
  const tree: ITreeItem[] = [];

  for (const item of items) {
    if (item.parentId === parentId) {
      const treeItem: ITreeItem = {
        ...item,
        children: buildMenuTree(items, item.id)
      };
      tree.push(treeItem);
    }
  }

  return tree;
}

const flatMenu: Item[] = [

  {
    "id": "1",
    "name": 'vegetable'
  },
  {
    "id": "2",
    "name": 'fruit',
    "childrenId": [
      "3",
      "4"
    ]
  },
  {
    "id": "3",
    "name": 'banana',
    "parentId": "2"
  },
  {
    "id": "4",
    "name": 'apple',
    "parentId": "2"
  }
];

const menuTree: Item[] = buildMenuTree(flatMenu);

console.log(JSON.stringify(menuTree, null, 2)); // Output the menu tree structure

将代码粘贴到 https://www.typescriptlang.org/play 即可体验。

在这个示例中，buildMenuTree 函数接受一个平铺的 Item 数组和一个可选的 parentId 参数，然后递归地构建树形结构。对于每个项目，它检查项目的 parentId 是否匹配传入的 parentId，如果匹配则将项目添加到当前节点的 children 数组中。

你可以将你提供的示例数据放入 flatMenu 数组中，然后运行代码，它将输出树形结构的 menuTree。请注意，这只是一个示例实现，你可以根据需要进行调整。

评论