树是一个非常常见且有点麻烦的数据结构。在js中，通常在生成树之前，数据是一个数组，每个元素代表一个节点，如下所示：
var data = [
{id: 1, parentId: 0, name: "1-A"},
{id: 2, parentId: 0, name: "1-B"}
]
生成树
由 parentId可以得知每个节点的父节点是哪个节点，这是生成树的重点。
在撸码前，先想一遍实现方式：
1、循环数组，将每个元素（节点）添加到它的父元素（父节点）的children数组里；
2、拿出 parentId为0的元素（节点），就可以组成一个树（因为每个节点已经带了所有的子节点，所以只需要parentId为0节点）。
下面是代码：
/* 将原始数组生成树 */
function makeTree (arr) {
var cloneData = JSON.parse(JSON.stringify(arr)) // 深度复制
for (var i in cloneData) {
for (var j in cloneData) {
if (i !== j) {
if (cloneData[i].id === cloneData[j].parentId) {
if (!cloneData[i].children) {
cloneData[i].children = []
}
cloneData[i].children.push(cloneData[j])
}
}
}
}
var tree = []
for (var item of cloneData) {
if (item.parentId === 0) { // 父节点是0的就是根节点，根节点已经带了所有的子节点
tree.push(item)
}
}
return tree
}
调用方法生成树：
var data = [
{id: 1, parentId: 0, name: "1-A"},
{id: 2, parentId: 0, name: "1-B"},
{id: 3, parentId: 0, name: "1-C"},
{id: 4, parentId: 1, name: "2-A-A"},
{id: 5, parentId: 1, name: "2-A-B"},
{id: 6, parentId: 2, name: "2-B-A"},
{id: 7, parentId: 4, name: "3-A-A-A"},
{id: 8, parentId: 7, name: "4-A-A-A-A"}
]
var tree = makeTree(data)
console.log(tree)
结果显示，tree是一个树状结构的数据。
解开树为普通数组
利用树结构的children,把每个children的数组拿出来即可：
/* 将树结构解开为普通数组 */
function jsonTree (tree) {
var cloneTree = JSON.parse(JSON.stringify(tree))
var arr = []
function loopJsonTree (tree) {
for (var item of tree) {
if (item.childen) {
loopJsonTree(item.childen)
delete item.childen
arr.push(item)
} else {
arr.push(item)
}
}
}
loopJsonTree(cloneTree)
return arr
}
调用方法解开树：
var arr = jsonTree(tree) // tree为上面生成的树
console.log(arr)
这样即可生成、解开树，这种写法有一个缺点是：生成树时数据重复太多，浪费内存。
（ps：有好的想法请写下评论；有不正之处，敬请指正！！！）
