代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [1,2,3,[4,5,[7,8,[9,10]]]] // 假设不知道多维数组的层数，将多维数组通过递归转换成一维数组
// result = [] // 参数的初始值，有数组数据就用数组数据，没有则定义一个空数组
function flat(list, result = []){
list.forEach(item => {
if(Array.isArray(item)){
flat(item, result) // 判断儿子是不是数组，是数组的话递归遍历
} else{
result.push(item) // 不是数组就进行push
}
});
return result
}
// console.log( flat(arr));
const obj = {
id: 1,
name: "部门1",
pid: 0,
children: [
{
id: 2,
name: "部门2",
pid: 1,
children: [],
},
{
id: 6,
name: "部门6",
pid: 1,
children: [],
},
{
id: 3,
name: "部门3",
pid: 1,
children: [
{
id: 4,
name: "部门4",
pid: 3,
children: [
{
id: 5,
name: "部门5",
pid: 4,
children: [],
},
],
},
],
},
],
};
// let result = []
// function treeToList(tree, result = []){
// result.push(tree)
// tree.children.forEach((item => {
// // result.push(item)
// // item.children.forEach(a=>{
// // result.push(a)
// // })
// treeToList(item, result) // 递归解决无限循环过程，递归的代码逻辑是类似的
// }))
// return result
// }
const arr1 = [
{ id: 1, name: "部门1", pid: 0 }, // 根节点
{ id: 2, name: "部门2", pid: 1 },
{ id: 3, name: "部门3", pid: 1 },
{ id: 4, name: "部门4", pid: 3 },
{ id: 5, name: "部门5", pid: 4 },
];
// 列表转树形的函数
function listToTree(list, pid){
// rootValue // 传入需要匹配的pid
let result = []
list.forEach((item)=>{
if(item.pid === pid){
// item.children = listToTree(list, item.id)
// list.forEach(a => {
// if(a.pid === item.id){
// children.push(a)
// let child = []
// list.forEach(b=>{
// if(b.pid === a.id){
// child.push(b)
// }
// a.children = child
// })
// item.children = children
// }
// })
// 以item.id 作为pid的就是item的孩子
item.children = listToTree(list, item.id) // 找到 pid === item.id的children
// 找完儿子把自己push到结果
result.push(item)
}
})
return result
}
console.log(listToTree(arr1, 0));
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手