js list to tree

在JavaScript中,将列表转换为树结构是一种常见的操作,尤其是在处理需要层级展示的数据,如菜单、分类等。这通常涉及到递归函数和对象的引用。以下是一个简单的例子,展示了如何将一个扁平化的列表转换为多层级树结构。
假设我们有以下这样的列表,每个节点有一个 `id` 和一个 `parentId`,表示它的父节点的ID:

const list = [
  { id: 1, parentId: null },
  { id: 2, parentId: 1 },
  { id: 3, parentId: 1 },
  { id: 4, parentId: 2 },
  { id: 5, parentId: 2 },
  { id: 6, parentId: 3 },
];


我们的目标是将这个列表转换成如下所示的树结构:

const tree = [
  {
    id: 1,
    parentId: null,
    children: [
      {
        id: 2,
        parentId: 1,
        children: [
          { id: 4, parentId: 2 },
          { id: 5, parentId: 2 }
        ]
      },
      {
        id: 3,
        parentId: 1,
        children: [
          { id: 6, parentId: 3 }
        ]
      }
    ]
  }
];


以下是将列表转换为树的JavaScript函数:

function listToTree(items) {
  const rootItems = [];
  const lookup = {};
  for (const item of items) {
    const itemId = item['id'];
    const parentId = item['parentId'];
    if (!lookup[itemId]) lookup[itemId] = { ['children']: [] };
    lookup[itemId] = { ...item, children: lookup[itemId]['children'] };
    if (parentId === null) {
      rootItems.push(lookup[itemId]);
    } else {
      if (!lookup[parentId]) lookup[parentId] = { ['children']: [] };
      lookup[parentId]['children'].push(lookup[itemId]);
    }
  }
  return rootItems;
}
const tree = listToTree(list);
console.log(JSON.stringify(tree, null, 2));


这个函数首先创建一个空的对象 `lookup` 来存储列表中每个元素的引用,并最终用它来构建树。然后,它遍历列表,对于每个元素,将其添加到 `lookup` 对象中,并根据其 `parentId` 将其作为子元素添加到相应的父元素中。最后,函数返回根元素数组 `rootItems`,它包含了整个树结构。
 

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-10 03:30:05       2 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-10 03:30:05       3 阅读
  3. 在Django里面运行非项目文件

    2024-07-10 03:30:05       2 阅读
  4. Python语言-面向对象

    2024-07-10 03:30:05       2 阅读

热门阅读

  1. 02更新用户在线状态

    2024-07-10 03:30:05       8 阅读
  2. CSS魔法:link与@import的秘密较量

    2024-07-10 03:30:05       7 阅读
  3. 第12章:软件系统分析与设计

    2024-07-10 03:30:05       7 阅读
  4. Rust入门实战 编写Minecraft启动器#2建立资源模型

    2024-07-10 03:30:05       9 阅读
  5. three.js利用着色器实现波浪效果

    2024-07-10 03:30:05       8 阅读
  6. Python pdfplumber库:轻松解析PDF文件

    2024-07-10 03:30:05       7 阅读
  7. 【必读】HTML中的BFC:10个你不知道的惊人事实

    2024-07-10 03:30:05       5 阅读