JavaScript将数据分组到2级深的树视图中

基础概念

在JavaScript中，将数据分组到二级深的树视图通常涉及到创建一个树形结构的数据模型，其中每个节点可能包含子节点。这种结构可以用来表示层次关系，比如文件系统、组织结构或者任何具有父子关系的数据。

类型

常见的树形结构类型包括：

二叉树：每个节点最多有两个子节点。
N叉树：每个节点可以有多个子节点。
B树/B+树：用于数据库索引，优化磁盘读写。

应用场景

文件系统：文件和文件夹的层次结构。
组织结构：公司或组织的层级关系。
路由系统：网络路由表的结构。
UI组件：如导航菜单、文件浏览器等。

示例代码

假设我们有一个数据数组，包含一些项目及其所属的类别，我们希望将其分组到一个二级深的树视图中。

const data = [
  { id: 1, name: 'Item 1', categoryId: 1 },
  { id: 2, name: 'Item 2', categoryId: 1 },
  { id: 3, name: 'Item 3', categoryId: 2 },
  { id: 4, name: 'Item 4', categoryId: 2 },
  { id: 5, name: 'Item 5', categoryId: 3 }
];

const categories = [
  { id: 1, name: 'Category 1' },
  { id: 2, name: 'Category 2' },
  { id: 3, name: 'Category 3' }
];

function createTree(data, categories) {
  const categoryMap = new Map();
  categories.forEach(category => {
    categoryMap.set(category.id, { ...category, children: [] });
  });

  const tree = [];
  data.forEach(item => {
    const category = categoryMap.get(item.categoryId);
    if (category) {
      category.children.push({ id: item.id, name: item.name });
    }
  });

  categoryMap.forEach(category => {
    tree.push(category);
  });

  return tree;
}

const tree = createTree(data, categories);
console.log(JSON.stringify(tree, null, 2));