把有层级的一维数组改为树形结构
时间:2019-06-12
本文章向大家介绍把有层级的一维数组改为树形结构,主要包括把有层级的一维数组改为树形结构使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
朋友问的问题,我试着写了一下。用了两层递归,感觉很麻烦。
<!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>
思路已经比较清楚了,可是代码理着理着就乱了,果然还是自己会的东西太少了吧,还是得多看多学。
<!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>
原文地址:https://www.cnblogs.com/eYan/p/11011608.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法