js 树形结构与扁平数组互相转换

在项目中需要使用到省市区联动选择，联动插件使用的是MobileSelect，本来没啥问题，把数据往里一填完事。

后面发现，省市区的数据居然很老，于是在github上，想找到更新的数据，于是找到了：

https://xiangyuecn.github.io/AreaCity-JsSpider-StatsGov/

但比较遗憾的是，它生成的数据，要么是使用区号作为key，要么只是一个数组，而不是一个树型结构，因此无法在MobileSelect直接使用。见下图：

 

然后萌发了通过它的源数据，即上图左上角的数据，进行直接转换为树形数据的想法，说干就干，然后就有了下面这段代码：

扁平数组转树形结构

var array=[
{"name":"一级","id":1,"pid":0},
	{"name":"一级子级1","id":11,"pid":1},
	{"name":"一级子级2","id":12,"pid":1},
{"name":"二级","id":2,"pid":0},
	{"name":"二级子级1","id":21,"pid":2},
	{"name":"二级子级2","id":22,"pid":2},
{"name":"三级","id":3,"pid":0},
	{"name":"三级子级1","id":31,"pid":3}];

function arrayToTree(array) {
	var map = {}; //存着每一个层级的引用，以id为key，方便查找
	var result = [];
	for(var i = 0; i < array.length; i++) {
		var obj = array[i];
		var clone = JSON.parse(JSON.stringify(obj));

		//如果需要改字段名，请在这里添加代码进行修改

		if(obj.pid == 0) {
			result.push(clone);
		}
		map[clone.id] = clone;
		if(map[clone.pid]) {
			if(!map[clone.pid].sub) map[clone.pid].sub = [];
			map[clone.pid].sub.push(clone);
		}
	}
	return result;
}

console.log(JSON.stringify(arrayToTree(array), null, 2));

 

树形结构转扁平数组

var treeData = [
{"name":"一级","id":1,"pid":0,"sub":[{"name":"一级子级1","id":11,"pid":1},{"name":"一级子级2","id":12,"pid":1}]},
{"name":"二级","id":2,"pid":0,"sub":[{"name":"二级子级1","id":21,"pid":2},{"name":"二级子级2","id":22,"pid":2}]},
{"name":"三级","id":3,"pid":0,"sub":[{"name":"三级子级1","id":31,"pid":3}]}];


//field 定义children字段名称
function treeToArray(treeData, field) {
	var result = [];
	if(!field) field = "children";
	for(var key in treeData) {
		var obj = treeData[key];
		var clone = JSON.parse(JSON.stringify(obj));
		delete clone[field];
		result.push(clone);
		//
		if(obj[field]) {
			var tmp = treeToArray(obj[field], field);
			result = result.concat(tmp);
		}
	}
	return result;
}

console.log(JSON.stringify(treeToArray(treeData, "sub"), null, 2));