原创

js一维数组根据pid递归生成树状结构

米醋儿发布于:2023-01-09

js一维数组根据pid递归生成树状结构，在前后端分离的项目中，发现有时候吧递归处理交给前端能减少前端工作量，比如这个生产树状图的结构，前端可以自己处理好open、active后再渲染为menu菜单。
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>

<script>
		let arr = [{
				id: 1,
				name: '部门1',
				pid: 0
			},
			{
				id: 2,
				name: '部门2',
				pid: 1
			},
			{
				id: 3,
				name: '部门3',
				pid: 1
			},
			{
				id: 4,
				name: '部门4',
				pid: 3
			},
			{
				id: 5,
				name: '部门5',
				pid: 4
			},
			{
				id: 6,
				name: '部门6',
				pid: 0
			},
		];
		//方法一 （递归）
		function arrayToTree(array, pid) {
			let result = []
			array.forEach(item => {
				if (item.pid == pid) {
					item.children = arrayToTree(array, item.id)
					result.push(item)
				}
			})
			return result
		}
		let treeArray = arrayToTree(arr, 0)
		console.log('treeArray', treeArray)

//方法二
		function toTree(data) {
			let result = []

let map = {};
			data.forEach(item => {
				map[item.id] = item;
			});
			console.log('map', map)
			data.forEach(item => {
				let parent = map[item.pid];
				if (parent) {
					(parent.children || (parent.children = [])).push(item);
				} else {
					result.push(item);
				}
		 });
			return result;
		}
		console.log('toTree(arr)', toTree(arr))
	</script>
</html>
```

注:原创不易,转载请注明出处( https://micuu.com/new/3212.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。

最后修改与 2023-01-09

上一篇：不刷新页面实现url网址变更

下一篇：创业是什么

▶ 珍藏视频

▶ 10分钟高效燃脂

▶ 30天高效瘦脸操

▶ 5分钟缓解颈椎操

友人