js递归无限层级数据

最新推荐文章于 2024-06-26 11:24:48 发布

原创最新推荐文章于 2024-06-26 11:24:48 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#递归 #树结构递归 #js #js递归

js 专栏收录该内容

33 篇文章

订阅专栏

本文探讨了如何使用递归函数处理复杂的数据结构，通过一个具体的JavaScript实例，展示了如何将嵌套的数组转换为HTML列表，以实现动态的菜单或者文件夹结构的展示。这个过程涉及到对递归算法的理解和应用，对于前端开发人员来说，是一个很好的实践案例。

//递归结构
var data=[{
	"id": 0,
	"folder": "sit et quis",
	"lower": [{
			"id": 1,
			"folder": "non est facere"
		},
		{
			"id": 2,
			"folder": "alias odio sit 一级B",
			"lower": [{
					"id": 9,
					"folder": "alias odio sit 二级B-1"
				},
				{
					"id": 10,
					"folder": "et omnis dolorem 二级B-2",
					"lower": [{
							"id": 12,
							"folder": "et omnis dolorem 三级B-2-1"
						},
						{
							"id": 8,
							"folder": " et omnis dolorem 三级B-2-2"
						}
					]
				},
				{
					"id": 11,
					"folder": "provident id volupta 二级B-3"
				}
			]
		}
	]
},
{"id": 110,"folder": "quo vero reiciendis"}  
];

var strText = '';
//递归
function dg(ml,display){
    var d=display ? "display" : "";
    strText+="<ul class='"+d+"'>";
    for(var i=0;i<ml.length;i++){
        strText+="<li  ><span>"+ml[i].folder+"</span>";    
        if(ml[i].lower){
            dg(ml[i].lower,true);
        }else{
            strText+="<ul class='display box'></ul>";   
        }
        strText+="</li>"
    }
    strText+="</ul>"
    return strText;
}

dg(data) //调用