将扁平化菜单数据转化为树状结构 - JavaScript 示例

将扁平化菜单数据转化为树状结构 - JavaScript 示例

在前端开发中，我们经常会遇到需要将扁平化的菜单数据结构转化为树状结构的情况，以便更好地进行展示和操作。例如，我们可能需要将以下格式的菜单数据：

[ 
  { 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' },
]

转化为如下树状结构：

[ 
  { 
    "id": 1, 
    "parent": null, 
    "text": "菜单1", 
    "children": [ 
      { 
        "id": 11, 
        "parent": 1, 
        "text": "菜单1-1", 
        "children": [ 
          { 
            "id": 111, 
            "parent": 11, 
            "text": "菜单1-1-1", 
            "children": [ 
              { 
                "id": 1111, 
                "parent": 111, 
                "text": "菜单1-1-1-1", 
                "children": [] 
              }, 
              { 
                "id": 1112, 
                "parent": 111, 
                "text": "菜单1-1-1-2", 
                "children": [] 
              } 
            ] 
          }, 
          { 
            "id": 112, 
            "parent": 11, 
            "text": "菜单1-1-2", 
            "children": [] 
          } 
        ] 
      }, 
      { 
        "id": 12, 
        "parent": 1, 
        "text": "菜单1-2", 
        "children": [] 
      } 
    ] 
  }, 
  { 
    "id": 2, 
    "parent": null, 
    "text": "菜单2", 
    "children": [ 
      { 
        "id": 21, 
        "parent": 2, 
        "text": "菜单2-1", 
        "children": [ 
          { 
            "id": 211, 
            "parent": 21, 
            "text": "菜单2-1-1", 
            "children": [] 
          } 
        ] 
      } 
    ] 
  } 
]

下面提供一个简单的 JavaScript 示例，演示如何将扁平化菜单数据转化为树状结构：

function buildTree(data) {
  const tree = [];
  const map = {};

  // 将数据存储到 map 中，方便查找父节点
  for (const item of data) {
    map[item.id] = item;
  }

  // 遍历数据，构建树结构
  for (const item of data) {
    if (item.parent === null) {
      tree.push(item);
    } else {
      if (!map[item.parent].children) {
        map[item.parent].children = [];
      }
      map[item.parent].children.push(item);
    }
  }

  return tree;
}

// 测试
const flatData = [ 
  { 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 treeData = buildTree(flatData);
console.log(treeData);

这段代码首先将所有数据存储到一个 map 中，方便查找父节点。然后遍历数据，根据每个节点的 parent 属性将其添加到相应的父节点的 children 属性中。最终，返回一个树状结构的数据。

注意：

• 上述代码假设菜单数据中的 parent 属性表示父节点的 ID，且所有节点都有唯一的 ID。
• 如果菜单数据中存在循环引用，则该算法无法正确构建树结构。

通过上述代码示例，我们可以轻松地将扁平化菜单数据转化为树状结构，方便前端展示和数据操作。