原创 

js 算法之目录列表生成目录树

分类:前端,python    444人阅读    Damon  2022-09-27 22:12

需求:

   获取zip目录树形结构。

取目录列表:

   关于后端获取目录列表,参考前文  Python ZIP 文件创建与读取树形目录结构

JS生成目录树:

var arr = [
"index.html",
"css/searchEngine.css",
"js/ajaxPackInfo.js",
"js/jquery.min.js",
"js/searchEngine.js"
]

let treeData=[]
let arrTree = []

for(let j=0;j<arr.length;j++){
	let item=arr[j]
	let items = item.split('/')
	let pNode = null
	for(let i=0;i<items.length;i++){
		let layArr = arrTree[i]
		if(null==layArr){
			layArr = []
			arrTree[i] = layArr
		}
		let val = items[i]
		let eNode = layArr.filter(ite=>ite.name==val)[0]
		let node = null
		if(null==eNode){
			node={name:val}
			if(i==items.length-1){
				node.type = "rain"
			}else{
				node.type = "category"
			}
			
			if(i==0){
				treeData.push(node)
			}else{
				 if(null==pNode.children){
					pNode.children=[]
				 }
				 pNode.children.push(node)
			}
			layArr.push(node)
		}else{
			node = eNode
		}

		pNode = node
	}
}

console.log(JSON.stringify(treeData))

 

生成结果:

[
	{
		"name": "index.html",
		"type": "rain"
	},
	{
		"name": "css",
		"type": "category",
		"children": [
			{
				"name": "searchEngine.css",
				"type": "rain"
			}
		]
	},
	{
		"name": "js",
		"type": "category",
		"children": [
			{
				"name": "ajaxPackInfo.js",
				"type": "rain"
			},
			{
				"name": "jquery.min.js",
				"type": "rain"
			},
			{
				"name": "searchEngine.js",
				"type": "rain"
			}
		]
	}
]
点击广告,支持我们为你提供更好的服务

百分比加载进度SVG线条动画

Tailwindcss高级管理后台模板框架 - T-Wind

CSS 3D铅笔旋转效果

残障人士服务网站HTML模板 - Medixare

功能齐全的ReactJs管理模板 - Adminto

技能培训在线学习平台网站模板 - Collab

创意代理和初创公司HTML模板 - Wan

CSS鼠标停靠图标变大

两个部分分割拖拽滑动

立体空间感3d几何体破碎

市政府和行政机构HTML5模板 - Towngov

选择图片并裁剪

canvas生日快乐动画特效

React实现的电子商务管理后台模板 - Dashtar

原子模型CSS3动画

SEO和数字营销机构HTML模板 - SEOMY

three.js立体感粒子动画

按钮的hover效果覆盖过渡

单页形式个人主页HTML模板 - Wedo

法律服务和律师事务所HTML5模板 - AttorCo

点击广告,支持我们为你提供更好的服务
 工具推荐 更多»
点击广告,支持我们为你提供更好的服务