JavaScript 树状结构构建函数 - 将扁平数组转换为树形结构

使用 JavaScript 函数构建树状结构

本文将介绍一个 JavaScript 函数 buildTree，它可以将一个包含嵌套数据的扁平数组转换为树形结构。该函数使用 Map 数据结构来高效地存储和查找数据，并使用递归来构建树结构。

函数代码：

function buildTree(data) {
  const map = new Map();
  const root = { id: null, children: [] };
  data.forEach(item => {
    item.children = [];
    map.set(item.id, item);
    if (item.parent === null) {
      root.children.push(item);
    } else {
      const parent = map.get(item.parent);
      parent.children.push(item);
    }  
  });
  return root.children;
}

函数解释：

1. 使用 Map 对象存储每个数据项，以 id 作为键，数据项作为值。
2. 初始化一个 root 对象，表示树的根节点，并设置 children 属性为一个空数组。
3. 遍历 data 数组，并对每个数据项进行以下操作：
   • 设置 item.children 为一个空数组，用于存储子节点。
   • 将数据项添加到 map 中，以 id 作为键。
   • 如果 item.parent 为 null，则将 item 添加到 root.children 数组中，表示该数据项为根节点的子节点。
   • 否则，从 map 中获取 item.parent 对应的父节点，并将 item 添加到父节点的 children 数组中。
4. 最后，返回 root.children 数组，即树的根节点的子节点。

示例用法：

const data = [
  { id: 1, parent: null, text: '菜单1' },
  { id: 11, parent: 1, text: '菜单1-1' },
  { id: 111, parent: 11, text: '菜单1-1-1' },
  { id: 1111, parent: 111, text: '菜单1-1-1-1' },
  { id: 1112, parent: 111, text: '菜单1-1-1-2' },
  { id: 112, parent: 11, text: '菜单1-1-2' },
  { id: 12, parent: 1, text: '菜单1-2' },
  { id: 2, parent: null, text: '菜单2' },
  { id: 21, parent: 2, text: '菜单2-1' },
  { id: 211, parent: 21, text: '菜单2-1-1' },
];

const tree = buildTree(data);
console.log(tree); // Output: [{ id: 1, parent: null, text: '菜单1', children: [{...}, {...}] }, { id: 2, parent: null, text: '菜单2', children: [{...}] }]

结论：

buildTree 函数通过使用 Map 和递归的方式，有效地将扁平数组转换为树形结构。该函数可以用于各种数据处理场景，例如构建菜单、组织文件系统、生成树状结构的图表等。