将JSON一维数据结构转化为树形数据结构是编程中的基本算法，这里总结一下，当然，也参考了一些前人的经验。
复习一下传址赋值（又叫引用赋值）
研究转化方法之前，先了解一下传址赋值，它是解决JSON结构转化的一个前提，如果没有传址赋值这种特性，咱们的方法就复杂多了。
看代码：
var a = {
b: {
c: 1
}
}
var x = a.b
a.b.c = 2
console.log(x) // {c: 2}
可以看出，表面上var x = a.b在前，a.b.c = 2重赋值在后，但是在前赋值的变量确实会被在后赋值的代码所影响。道理很简单，当一个变量的值为数组或对象的时候，变量的值并不会在内存中克隆一份，而是直接指向数组或者对象的内存原地址，只要原数据有变化，变量也就等于有变化了。下面是数组的例子，你以为x是永远不变的[2,3]么？并不是：
var a = [1,[2,3],4]
var x = a[1]
a[1][1] = 6
console.log(x) // [2, 6]
JSON一维结构转树形结构的要求
首先先明确一维结构的写法，比如，让你将某国军队的从属关系存入数据表，你怎么存？
比较普遍的写法是：
var jsonData = [{
"id": "1",
"pid": "0",
"name": "第一战区"
}, {
"id": "4",
"pid": "1",
"name": "第1军"
}, {
"id": "5",
"pid": "4",
"name": "第1师"
}]
也就是说，使用pid标记上级，这样一级级的追溯，最终可以形成树状结构，大致如下：
var jsonData = [{
"id": "1",
"pid": "0",
"name": "第一战区",
"children": [
{
"id": "4",
"pid": "1",
"name": "第1军",
"children": [
{
"id": "5",
"pid": "4",
"name": "第1师"
}
]
}
]
}]
思路
- 利用临时数组变量，将无序的JSON数据编制序列。
因为默认的JSON结构，你无法迅速定位一个想要的元素，如果用临时数组变量，将元素按照id存入数组，就可以快速定位元素。 - 遍历JSON的每一个元素，去临时变量里寻找它的父元素，如果找到，就填到这个父元素的children里面，如果找不到父元素，说明它就是一级元素。
最终将所有一级元素push到result变量即可。
这里就涉及到一个问题，就是如果先发生了一级元素已经push到result变量，那么之后再发生下级元素填到该一级元素的children里，还来得及么？
这里就用到JS的传址赋值的特点了，所以答案是：来得及。
代码
代码的JSON使用了别人的一个例子，而函数是我自己写的：
var jsonData = [{
"id": "1",
"pid": "0",
"name": "家用电器"
}, {
"id": "4",
"pid": "1",
"name": "大家电"
}, {
"id": "5",
"pid": "1",
"name": "生活电器"
}, {
"id": "2",
"pid": "0",
"name": "服饰"
}, {
"id": "3",
"pid": "0",
"name": "化妆"
}, {
"id": "7",
"pid": "4",
"name": "空调"
}, {
"id": "8",
"pid": "4",
"name": "冰箱"
}, {
"id": "9",
"pid": "4",
"name": "洗衣机"
}, {
"id": "10",
"pid": "4",
"name": "热水器"
}, {
"id": "11",
"pid": "3",
"name": "面部护理"
}, {
"id": "12",
"pid": "3",
"name": "口腔护理"
}, {
"id": "13",
"pid": "2",
"name": "男装"
}, {
"id": "14",
"pid": "2",
"name": "女装"
}, {
"id": "15",
"pid": "7",
"name": "海尔空调"
}, {
"id": "16",
"pid": "7",
"name": "美的空调"
}, {
"id": "19",
"pid": "5",
"name": "加湿器"
}, {
"id": "20",
"pid": "5",
"name": "电熨斗"
}];
function flat2tree(jsonData){
var result = [], temp = {}, i = 0, j = 0, len = jsonData.length
for(; i < len; i++){
temp[jsonData[i]['id']] = jsonData[i] // 以id作为索引存储元素，可以无需遍历直接定位元素
}
for(; j < len; j++){
var currentElement = jsonData[j]
var tempCurrentElementParent = temp[currentElement['pid']] // 临时变量里面的当前元素的父元素
if (tempCurrentElementParent) { // 如果存在父元素
if (!tempCurrentElementParent['children']) { // 如果父元素没有chindren键
tempCurrentElementParent['children'] = [] // 设上父元素的children键
}
tempCurrentElementParent['children'].push(currentElement) // 给父元素加上当前元素作为子元素
} else { // 不存在父元素，意味着当前元素是一级元素
result.push(currentElement);
}
}
return result;
}
console.log(flat2tree(jsonData))
更新一种代码量极简，但运算复杂度较高的算法
速度比上一种算法慢9倍，但是胜在代码足够简单。
// jsonData 从略
function flat2tree(pid, arr) {
return arr.filter(item => item.pid === pid).map(item => ({...item, children: flat2tree(item.id, arr)}))
}
