获取一维数组后构建树形结构，可无限级_一维数组根据条件判断生成tree树型数据-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_24692451/article/details/85111569

本文介绍了一种使用JavaScript处理树状结构数据的方法，通过遍历和排序算法将JSON数据转换为树形结构，并按SerialNo字段进行排序。示例中展示了如何从一组具有层级关系的数据中构建树形结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function getTree(arr){
	
	//Id作为索引
	let map = {};
	arr.forEach(item => {
		map[item.Id] = item;
	})

	let tree = [];
	arr.forEach(node => {
        //以节点的ParentId来匹配map里面的索引
		let parent = map[node.ParentId];
		if(parent){
			if(!parent["Children"]){
				parent["Children"] = [];
			}
			parent["Children"].push(node);
            //根据SerialNo排序号进行排序
			parent["Children"].sort(compare("SerialNo"));
		}else{
            //如果匹配不到父节点则自身作为父节点
			tree.push(node)
		}
		
	})
	//排序
	tree.sort(compare("SerialNo"))
	return tree
}

//根据排序号排序的函数
function compare(prototype){
	return function(a,b){
		let value1 = a[prototype];
		let value2 = b[prototype];
		return value1 - value2;
	}
}

获取的json数据如下

{
	"Area": [
		    {
			"Id": "a184a96c-21de-4e8c-ac99-0c8fc877f7b6",
			"Name": "佛山市",
			"AreaCode": "FS",
			"SerialNo": 3,
			"ParentId": "17c0a3a2-080c-4858-ace5-3eeb942c3344"
		},
		{
			"Id": "a184a96c-21de-4e8c-ac99-0c8fc877f7b1",
			"Name": "珠海市",
			"AreaCode": "ZH",
			"SerialNo": 2,
			"ParentId": "17c0a3a2-080c-4858-ace5-3eeb942c3344"
		},
		{
			"Id": "ee51b2a7-7f2a-42c5-90b2-13b296fabe6c",
			"Name": "澳门",
			"AreaCode": "am",
			"SerialNo": 2,
			"ParentId": "00000000-0000-0000-0000-000000000000"
		},
		{
			"Id": "17c0a3a2-080c-4858-ace5-3eeb942c3344",
			"Name": "广东省",
			"AreaCode": "GD",
			"SerialNo": 1,
			"ParentId": "00000000-0000-0000-0000-000000000000"
		},
		{
			"Id": "92dc3656-50dd-45d1-94ab-530f2fa097b5",
			"Name": "中山市",
			"AreaCode": "ZS",
			"SerialNo": 1,
			"ParentId": "17c0a3a2-080c-4858-ace5-3eeb942c3344"
		},
		{
			"Id": "8af6434b-b8f2-4133-beb1-84020c185449",
			"Name": "广州",
			"AreaCode": "gz",
			"SerialNo": 3,
			"ParentId": "00000000-0000-0000-0000-000000000000"
		},
		{
			"Id": "3823b352-62b8-4220-a7d8-9fb7e30e0e0f",
			"Name": "深圳",
			"AreaCode": "sz",
			"SerialNo": 1,
			"ParentId": "92dc3656-50dd-45d1-94ab-530f2fa097b5"
		},
		{
			"Id": "264cc86c-33f1-403c-96fa-a93fd5223155",
			"Name": "江门市",
			"AreaCode": "JM",
			"SerialNo": 1,
			"ParentId": "3823b352-62b8-4220-a7d8-9fb7e30e0e0f"
		}
	]
}