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));