标签：har make class else title log ack parentId head
朋友问的问题，我试着写了一下。用了两层递归，感觉很麻烦。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> <script type="text/javascript"> let tree =[ { id: 2, name: "节点二", parentId: null }, { id: 9, name: "节点1-1", parentId: 1 }, { id: 19, name: "节点1-2", parentId: 1 }, { id: 39, name: "节点三", parentId: null }, { id: 40, name: "节点1-3", parentId: 1 }, { id: 41, name: "节点1-1-1", parentId: 9 }, { id: 1, name: "节点一", parentId: null }, ] let newArr=[]; for(let i=0;i<tree.length;i++){ tree[i].children=[];//先向所有节点添加子节点 } function makeTree(){ const treeCopy=JSON.parse(JSON.stringify(tree));//每次递归拷贝一份原始数据，用于循环变量i； for(let i=0;i<treeCopy.length;i++){ if(treeCopy[i].parentId){//判断根节点 const tr=this.compare(treeCopy[i],newArr); if(tr){ tree=tree.filter(item=>{//将已匹配的子节点剔除数组 return item.id!==tr.id }); } }else{ newArr.push(treeCopy[i]); tree=tree.filter(item=>{//将根节点剔除数组 return item.id!==treeCopy[i].id }); } } if(tree.length){//原始数组剔除完递归结束 this.makeTree(); } } function compare(t,nArr){ for(let j =0;j<nArr.length;j++){ if(nArr[j].id===t.parentId){//先比较当前节点 nArr[j].children.push(t); return t; } if(nArr[j].children.length){//当前节点匹配不上匹配子节点 return this.compare(t,nArr[j].children); } } return false; } this.makeTree(); console.log(newArr); </script>
朋友的朋友也拿去实现了一下，我瞬间感觉自己弱爆了。。。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> <script type="text/javascript"> let arr =[ { id: 41, name: "节点1-1-1", parentId: 9 }, { id: 2, name: "节点二", parentId: null }, { id: 9, name: "节点1-1", parentId: 1 }, { id: 19, name: "节点1-2", parentId: 1 }, { id: 39, name: "节点三", parentId: null }, { id: 40, name: "节点1-3", parentId: 1 }, { id: 1, name: "节点一", parentId: null }, { id: 55, name: "节点1-1-1-1", parentId: 41 }, ] var data = [...arr]; var tree = data.filter((father) => { var branchArr = data.filter((child) => { if (father.id == child.parentId ) child._hasParent = true; return father.id == child.parentId; }); if (branchArr.length > 0) father.children = branchArr; return !father._hasParent; }); tree = tree.filter((item) => { return !item._hasParent; }) </script>
思路已经比较清楚了，可是代码理着理着就乱了，果然还是自己会的东西太少了吧，还是得多看多学。
标签：har make class else title log ack parentId head
原文地址：https://www.cnblogs.com/eYan/p/11011608.html
