JavaScript树结构和一维数组互转

资深CV大师

已于 2022-06-28 22:17:01 修改

阅读量330

点赞数

分类专栏： javascript 文章标签： javascript 前端开发语言

于 2022-06-22 18:51:55 首次发布

本文链接：https://blog.csdn.net/weixin_44903107/article/details/125414980

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var source = [{
				id: 1,
				pid: 0,
				name: '江苏省'
			}, {
				id: 2,
				pid: 1,
				name: '南京市'
			}, {
				id: 7,
				pid: 0,
				name: '上海市'
			}, {
				id: 3,
				pid: 2,
				name: '鼓楼区'
			}, {
				id: 6,
				pid: 5,
				name: '武汉市'
			}, {
				id: 4,
				pid: 2,
				name: '玄武区'
			}, {
				id: 5,
				pid: 0,
				name: '湖北省'
			}]

			function toTree(data) {
				let result = [];
				if (!Array.isArray(data)) {
					return result;
				}
				data.forEach(item => {
					delete item.children;
				});
				let map = {};
				data.forEach(item => {
					map[item.id] = item; // id为键，原数据每一项为值的map对象
				});
				data.forEach(item => {
					let parent = map[item.pid]; // item的pid若与map对象的键相同，则item为父级节点
					let label = "";
					item.label = item.name;
					if (parent) {
						(parent.children || (parent.children = [])).push(item);
						parent.children.forEach(_item => {
							_item.label = _item.name;
						});
					} else {
						result.push(item);
					}
				});
				console.log(result)
				return result;
			}
			let treearr = toTree(source);
			// 树形数据转为一维数组
			function getOneArr(arr) {
				let data = JSON.parse(JSON.stringify(arr)) // 此处应该换成loadsh的cloneDeep
				let newData = []
				const callback = (item) => {
					(item.children || (item.children = [])).map(v => {
						callback(v)
					})
					delete item.children
					newData.push(item)
				}
				data.map(v => callback(v))
				return newData
			}
			console.log(getOneArr(treearr))

               //树结构转换一维数组
let data = [
    {
		name:1,
		sex:0,
		children:[
			{
				name:3
			},
			{
				name:4,
				children:[
					{
						name:3
					},
					{
						name:4
					}
				]
			}
		]
	},
	{
		name:2
	}	
]
function toOneList(){
    //承载数据
    let newData = []
    //递归方法
    function getData(data){
	    data.forEach(item=>{
		    if(item.children){
			    getData(item.children)
			    delete item.children
			    newData.push(item)
		    }else{
			    newData.push(item)
		    }
	        })
        }
        getData(data)
    }

		</script>
	</body>
</html>