随笔 - 750  文章 - 1  评论 - 107  阅读 - 34万

【转】[JavaScript] 将一组对象生成一个树形结构

来自:kimi.ai

以下是一个用 JavaScript 实现的代码示例,用于将一组对象按 pid(父级ID)和 id(当前对象ID)属性建立父子关系。最终会生成一个树形结构的数组。
JavaScript复制
// 示例数据
const items = [
  { id: 1, pid: null, name: 'Item 1' },
  { id: 2, pid: 1, name: 'Item 2' },
  { id: 3, pid: 1, name: 'Item 3' },
  { id: 4, pid: 2, name: 'Item 4' },
  { id: 5, pid: null, name: 'Item 5' },
  { id: 6, pid: 5, name: 'Item 6' }
];

// 用于将对象按父子关系组织成树形结构
function buildTree(items) {
  const map = new Map(); // 用于存储ID和对象的映射
  const tree = []; // 最终的树形结构数组

  // 首先将所有对象存入map,方便后续查找
  for (const item of items) {
    map.set(item.id, { ...item, children: [] }); // 为每个对象添加children属性
  }

  // 遍历每个对象,根据pid建立父子关系
  for (const item of items) {
    if (item.pid === null) {
      // 如果pid为null,说明是根节点
      tree.push(map.get(item.id));
    } else {
      // 如果有pid,找到对应的父对象,并将其添加到父对象的children数组中
      const parent = map.get(item.pid);
      if (parent) {
        parent.children.push(map.get(item.id));
      }
    }
  }

  return tree;
}

// 调用函数并输出结果
const result = buildTree(items);
console.log(JSON.stringify(result, null, 2));

代码说明

  1. 数据准备:items 是一个数组,包含多个对象,每个对象有 idpid 和其他属性。
  2. 映射存储:使用 Map 来存储每个对象,键为 id,值为对象本身,并为每个对象添加一个 children 属性,用于存储子节点。
  3. 建立关系:
    • 遍历每个对象,根据 pid 判断其是否为根节点(pidnull)。
    • 如果是根节点,直接加入到最终的树形结构数组 tree 中。
    • 如果不是根节点,则通过 Map 找到其父节点,并将其添加到父节点的 children 数组中。
  4. 输出结果:最终的 tree 数组是一个树形结构,可以通过递归遍历等方式进行操作。

输出示例

对于上述示例数据,输出结果为:
JSON复制
[
  {
    "id": 1,
    "pid": null,
    "name": "Item 1",
    "children": [
      {
        "id": 2,
        "pid": 1,
        "name": "Item 2",
        "children": [
          {
            "id": 4,
            "pid": 2,
            "name": "Item 4",
            "children": []
          }
        ]
      },
      {
        "id": 3,
        "pid": 1,
        "name": "Item 3",
        "children": []
      }
    ]
  },
  {
    "id": 5,
    "pid": null,
    "name": "Item 5",
    "children": [
      {
        "id": 6,
        "pid": 5,
        "name": "Item 6",
        "children": []
      }
    ]
  }
]
你可以根据实际需求调整代码逻辑,例如处理更复杂的数据结构或添加额外的属性。
posted on   z5337  阅读(7)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
历史上的今天:
2024-02-05 [转][Centos]安装 gogs
2024-02-05 【转】【Centos】配置静态IP
2024-02-05 【转】【Centos】安装 VMware Tools
2024-02-05 [转][Linux]安装 Centos
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示