js无限级树形菜单

在 JavaScript 中实现无限级树形菜单，通常涉及到递归的数据结构和相应的渲染逻辑。

基础概念：

树形结构：具有层次关系的数据结构，每个节点可以有零个或多个子节点。
递归：在函数内部调用自身来解决问题。

优势：

灵活性高，可适应不同层级的数据。
易于理解和实现。

类型：

嵌套对象表示法：每个节点是一个对象，包含自身数据和子节点数组。
数组表示法：所有节点存储在一个数组中，每个节点通过特定的属性（如 parentId）指明其父节点。

应用场景：

文件系统展示。
组织架构图。
分类目录导航。

常见问题及解决方法：

渲染性能问题：当树形菜单层级很深或节点数量很多时，可能导致页面卡顿。可以通过虚拟滚动（只渲染可视区域内的节点）来优化。
数据加载缓慢：如果数据量较大，一次性加载会影响体验。可以采用懒加载，即在展开节点时才加载其子节点数据。

以下是一个简单的无限级树形菜单的示例代码（使用嵌套对象表示法）：

// 树形菜单数据示例
const menuData = [
  {
    id: 1,
    name: '菜单 1',
    children: [
      {
        id: 2,
        name: '子菜单 1-1',
        children: [
          { id: 3, name: '子菜单 1-1-1', children: [] },
          { id: 4, name: '子菜单 1-1-2', children: [] }
        ]
      },
      { id: 5, name: '子菜单 1-2', children: [] }
    ]
  },
  {
    id: 6,
    name: '菜单 2',
    children: []
  }
];

// 渲染树形菜单的函数
function renderMenu(menu) {
  let html = '<ul>';
  menu.forEach(item => {
    html += `<li>${item.name}`;
    if (item.children && item.children.length > 0) {
      html += renderMenu(item.children);
    }
    html += '</li>';
  });
  html += '</ul>';
  return html;
}

// 将渲染结果显示在页面中
document.getElementById('menu-container').innerHTML = renderMenu(menuData);

在上述代码中，renderMenu 函数通过递归的方式遍历树形数据并生成相应的 HTML 结构。