JavaScript将一个包含父子关系的扁平化数组转换成树形菜单
发表于:2023-05-18 09:29:30浏览:411次
以下是将一个包含父子关系的扁平化数组转换成树形菜单的JavaScript递归函数的示例:
function generateTree(arr, parentId = null) {
const tree = [];
for (let i = 0; i < arr.length; i++) {
if (arr[i].parent_id === parentId) {
const node = {
id: arr[i].id,
name: arr[i].name,
children: generateTree(arr, arr[i].id)
};
tree.push(node);
}
}
return tree;
}
该函数接受一个包含父子关系的扁平化数组和可选的parentId参数作为输入。它会遍历数组并找到所有具有指定父ID的节点,将它们转换为对象,并在children属性中递归调用它自己以获取每个节点的子节点。最终,它将返回一个树形菜单对象数组。
例如,假设我们有以下扁平化数组:
const flatArray = [
{ id: 1, parent_id: null, name: 'Home' },
{ id: 2, parent_id: 1, name: 'About' },
{ id: 3, parent_id: 1, name: 'Contact' },
{ id: 4, parent_id: 2, name: 'History' },
{ id: 5, parent_id: 2, name: 'Team' },
{ id: 6, parent_id: 3, name: 'Support' },
{ id: 7, parent_id: 3, name: 'Sales' }
];
我们可以调用generateTree(flatArray)以获取以下树形菜单对象数组:
[
{
id: 1,
name: 'Home',
children: [
{
id: 2,
name: 'About',
children: [
{ id: 4, name: 'History', children: [] },
{ id: 5, name: 'Team', children: [] }
]
},
{
id: 3,
name: 'Contact',
children: [
{ id: 6, name: 'Support', children: [] },
{ id: 7, name: 'Sales', children: [] }
]
}
]
}
]
推荐文章
- ThinkPHP发布安全更新版本(V6.1.0/V6.0.14),移除对think-filesystem库的依赖
- lnmp,PHP程序访问网站主目录外的文件访问错误的解决方案
- 使用table2excel实现layui数据表格导出复杂表头EXCEL
- Xshell提示 “要继续使用此程序,您必须应用最新的更新或使用新版本”
- 勾股系列系统:项目任务协作管理系统 —— 勾股 DEV 3.8.31 发布
- 使用pnpm快速创建vite+vue3项目
- Flash已退出历史舞台,未来Web端3D的内容会怎样发展?
- JavaScript实现两个日期之间的工时计算,排除周末,每天工作日是8小时
- Thinkphp6使用mPdf实现生成pdf文件
- 韦伯空间望远镜飞行软件采用 C++ 编写、内置定制的JS解释器