JavaScript平级数组转树形结构

平级菜单的树形结构，在项目里其实挺常见的，尤其你在做左侧导航、下拉分类选项时，基本逃不掉这一步。这个资源专门帮你把一堆带id和parentId的平铺数据，组合成标准的树形结构，写法清爽，逻辑也好懂，基本上拎进去就能用。

菜单数据是最容易被后台一把甩过来的那种，层级关系靠id和parentId维护，你拿到后想直接渲染菜单树就得先转结构。这份代码就做了这件事，递归 + ID 映射，兼容性也挺好，直接丢到Vue或React项目里都能跑。

对比了几个相关的资源，像js 树形结构菜单还有下拉树形选择菜单这些，功能都类似，但这个组合树形结构的逻辑更聚焦纯数据，适合你自己二次加工。

有一点要注意，如果你的数据有层级比较深，建议先做个扁平化索引 map 再拼接节点，这样效率更高，避免递归爆栈。代码里也做了这块的优化：

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

list.forEach(item => map[item.id] = { ...item, children: [] });
list.forEach(item => {
    const parent = map[item.parentId];
    if (parent) {
      parent.children.push(map[item.id]);
    } else {
      tree.push(map[item.id]);
    }
  });
return tree;
}

如果你正好在搞菜单列表、后台系统的导航树，又懒得自己写递归，不妨看看这个。哦对，还有几个不错的例子你可以参考：

• jQuery 动态菜单列表树：适合老项目维护
• 左右菜单列表：偏 UI 实现
• 下拉树形结构：选项类菜单

如果你还不确定用哪个，不妨都下载下来跑一圈试试，选个最适合你项目的数据结构方式。