js查找树形结构递归方法

最新推荐文章于 2023-08-04 20:00:44 发布

beichen3997

最新推荐文章于 2023-08-04 20:00:44 发布

阅读量3.2k

点赞数 1

分类专栏：前端js 文章标签： js

本文链接：https://blog.csdn.net/beichen3997/article/details/100033957

版权

前端js 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

1.利用递归map循环，再用外层过滤注意return的作用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			let arr=[{
				id:1,
				children:[{id:11}]
			},{
				id:2,
				children:[{id:12}]
			},{
				id:3,
				children:[{id:13}]
			}]
			function list(list1,id){
				let items=[]
				items=list1.map((item)=>{
				  if(item.id===id){
					 return item
				  }else{
					 if(item.children&&item.children.length){
					   return list(item.children,id)
					 }
				  }
				})
			   return items
			}
			let lists=list(arr,12)
			let data=[]
			lists.filter(item=>{
				console.log(item[0])
				if(item[0]!=undefined){
					data.push(item[0])
				}
				
				
			})
			console.log(data) //[{id:12}]
			
		</script>
	</body>
</html>

2.第二种方法利用全局变量直接获取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			let arr=[{
				id:1,
				children:[{id:11}]
			},{
				id:2,
				children:[{id:12}]
			},{
				id:3,
				children:[{id:13}]
			}]
			let lists =[]
			function list(list1,id){
				
				list1.map((item)=>{
				  if(item.id===id){
					  lists.push(item)
				  }else{
					 if(item.children&&item.children.length){
					   return list(item.children,id)
					 }
				  }
				})
			}
			list(arr,12)
			console.log(lists) // [{id:12}]
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			let arr=[{
				id:1,
				children:[{id:11}]
			},{
				id:2,
				children:[{id:12}]
			},{
				id:3,
				children:[{id:13}]
			}]
			let lists =[]
			function list(list1,id){
				
				list1.filter((item)=>{
				  if(item.id===id){
					  lists.push(item)
				  }else{
					 if(item.children&&item.children.length){
					   return list(item.children,id)
					 }
				  }
				})
			}
			list(arr,12)
			console.log(lists) // [{id:12}]
		</script>
	</body>
</html>

3.层层查找进行改动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			let arr=[{
				id:1,
				children:[{id:11}]
			},{
				id:2,
				children:[{id:12},{id:13}]
			},{
				id:3,
				children:[{id:13}]
			}]
			let lists =[{id:2},{id:13}]
			function list(list1,ids){
				
				list1.map((item)=>{
					lists.map(val=>{
						console.log(val,item)
						if(item.id===val.id){
							item.name='ceshi'
							 if(item.children&&item.children.length){
							   return list(item.children)
							 }
						}
						
					})
				
				  
				})
			}
			list(arr)
			console.log(arr)
		</script>
	</body>
</html>

4.逐级获取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			let arr=[{
				id:1,
				children:[{id:11}]
			},{
				id:2,
				children:[{id:12},{id:13}]
			},{
				id:3,
				children:[{id:13}]
			}]
			let lists =[{id:2},{id:13}];
			
			let ded=0;
			function list(list1,id){
				let data=list1.filter((item)=>{
					if(ded<lists.length){
						if(item.id===lists[ded].id){
							console.log(ded,item)
							if(ded==lists.length-1){
								return item=item
							}else{
								ded=ded+1
								if(item.children&&item.children.length){
									return item.children=list(item.children,lists[ded].id)
								}
							}
							
							// return item
						}
						
					}
						
				  
				})
				return data
			}
			console.log(list(arr,lists[ded].id))
		</script>
	</body>
</html>

5.逐级

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			let arr=[{
				id:1,
				children:[{id:11}]
			},{
				id:2,
				children:[{id:12},{id:13}]
			},{
				id:3,
				children:[{id:13}]
			}]
			let lists =[{id:2},{id:13}];
			
			// let ded=0;
			function list(list1,id,index){
				let data=list1.filter((item)=>{
						if(item.id===id){
							if(index==lists.length-1){
								return item=item
							}else{
								if(item.children&&item.children.length){
									return item.children=list(item.children,lists[index+1].id,index+1)
								}
							}
						}
				})
				return data
			}
			
			console.log(list(arr,lists[0].id,0))
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			let arr=[{
				id:1,
				children:[{id:11}]
			},{
				id:2,
				children:[{id:12},{id:13}]
			},{
				id:3,
				children:[{id:14}]
			}]
			let lists =[{id:2},{id:13}];
			
			let ded=0;
			function list(list1,id){
				let data=list1.filter((item)=>{
					if(ded<lists.length){
						if(item.id===lists[ded].id){
								ded=ded+1
								if(item.children&&item.children.length){
									return item.children=list(item.children,lists[ded].id)
								}else{
									return item=item
								}
						}
						
					}
						
				  
				})
				return data
			}
			console.log(list(arr,lists[ded].id))
		</script>
	</body>
</html>

beichen3997

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
js查找树形结构递归方法

1.利用递归map循环，再用外层过滤注意return的作用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> let arr=[...
复制链接

扫一扫