js数组递归--------生成tree树形菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组递归</title>
		<style>
			ul>li {
				list-style: none;
				padding-top: 10px;
			}
		</style>
	</head>
	<body>
		<ul id="ulDom1">
		</ul>
		<ul id="ulDom2">
		</ul>
	</body>
</html>

<script>
	var arr1 = [
		{text: "1",list: [
			{text: "1-1",list: []},
			{text: "1-2",list: []}
		],},
		{text: "2",list: [
			{text: "2-1",list: []},
			{text: "2-2",list: [
				{text: "2-2-1",list: []},
				{text: "2-2-2",list: [
					{text:"2-2-2-1",list:[]},
					{text:"2-2-2-2",list:[]},
					{text:"2-2-2-3",list:[]}
				]}
			]},
		]},
		{text: "3",list: []},
		{text: "4",list: [
			{text: "4-1",list: []},
			{text: "4-2",list: []}
		]}
	];
	
	var arr2 = [
		{supId:"1",id:"1",text:"一级"},
		{supId:"2",id:"2",text:"一级"},
		{supId:"1",id:"11",text:"二级"},
		{supId:"1",id:"12",text:"二级"},
		{supId:"1",id:"13",text:"二级"},
		{supId:"13",id:"131",text:"三级"},
		{supId:"13",id:"132",text:"三级"},
		{supId:"2",id:"21",text:"二级"},
		{supId:"2",id:"22",text:"二级"},
		{supId:"131",id:"1311",text:"四级"},
		{supId:"3",id:"3",text:"一级"},
	];
	
	window.onload = function() {
		var str = "";
		for (var i = 0; i < arr1.length; i++) {
			console.log(arr1[i].text);
			str += "<li><span>" + arr1[i].text + "</span>";
			if (arr1[i].list && arr1[i].list.length != 0) {
				str += recursion1(arr1[i].list);
			}
			str += "</li>";
		}
		document.getElementById("ulDom1").innerHTML = str;

		str = "";
		for (var i = 0; i < arr2.length; i++) {
			if (arr2[i].supId == arr2[i].id) {
				console.log(arr2[i]);
				str += "<li><span>supId = " + arr2[i].supId + "------id = " + arr2[i].id + "------text = " + arr2[i].text +
					"</span>";
				str += recursion2(arr2[i].id);
				str += "</li>";
			}
		}
		document.getElementById("ulDom2").innerHTML = str;
	}

	function recursion1(list) {
		var str = "<ul>";
		for (var i = 0; i < list.length; i++) {
			console.log(list[i].text);
			str += "<li><span>" + list[i].text + "</span>";
			if (list[i].list && list[i].list.length != 0) {
				str += recursion1(list[i].list);
			}
			str += "</li>";
		}
		return str + "</ul>";
	}

	function recursion2(id) {
		var str = "<ul>"
		for (var i = 0; i < arr2.length; i++) {
			if (arr2[i].supId == id && arr2[i].supId != arr2[i].id) {
				console.log(arr2[i]);
				str += "<li><span>supId = " + arr2[i].supId + "------id = " + arr2[i].id + "------text = " + arr2[i].text +
					"</span>";
				str += recursion2(arr2[i].id);
				str += "</li>";
			}
		}
		return str == "<ul>" ? "" : str + "</ul>";
	}
</script>

效果图

原文链接：https://blog.csdn.net/weixin_44637298/article/details/115987934