js 树

树是一个非常常见且有点麻烦的数据结构。在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：有好的想法请写下评论；有不正之处，敬请指正！！！）

生成树

解开树为普通数组

推荐阅读更多精彩内容