树结构使用实例---实现数组和树结构的转换

树是一种非散列数据结构，和非散列表一样，它对于存储需要快速查找的数据非常有用。

树是一种分层数据的抽象模型。现实生活中最常见的树的例子是家谱，或是公司的组织架构

本文将讲述一个实例，构造一棵树来实现数组和tree的相互转换，这在前端树结构中是经常遇到的。

需求场景：

将数组转化树结构，并将树结构转化为数组

数组

const list= [{ id: 1001, parentId: 0, name: 'AA' },{ id: 1002, parentId: 1001, name: 'BB' },{ id: 1009, parentId: 1005, name: 'II' },{ id: 1003, parentId: 1001, name: 'CC' },{ id: 1004, parentId: 1003, name: 'DD' },{ id: 1005, parentId: 1003, name: 'EE' },{ id: 1006, parentId: 1002, name: 'FF' },{ id: 1007, parentId: 1002, name: 'GG' },{ id: 1008, parentId: 1004, name: 'HH' },];

分析：

数组list是无规则排序的，不过分析过后，可以看到是一个通过parentId关联的树，那么如何实现呢？

树结构是一个对象，有一个root节点，并且有一系列的方法，比如插入节点，删除节点，获取节点，获取深度等等。

节点也是一个对象，有一定的属性，而且节点的属性也可能是其他的树。

那么我们可以先构造一个节点对象Node，每个Node有id, parentId, name, childNodes属性

构造一棵树listTree，先在数组中找到根节点（parentId === 0）

再给listTree添加list数组中的元素，直到添加完毕，就得到了树结构

实现步骤：

1，构造Node

class Node {constructor(options){let { id, parentId, name } = optionsthis.id = id || null;this.parentId = parentId;this.name = name || null;this.childNodes = []}getId(){return this.id;}...
}

2，构造树listTree

创建listTree时，初始化this.root，生成this.root（generateRoot）

由于在root上添加节点，所以增加了insertNode方法，插入时要找到root中对用的parentId

代码如下：

class listTree{constructor(arr){this.root = new Node(arr.find(item => item.parentId === 0))this.generateRoot(arr)}generateRoot(arr){// ...}getNodeById(id){// ...}insertNode(node, id){let targetNode = this.getNodeById(id)// ...}// ...
}

3，完善listTree

getNodeById(id)：遍历this.root，找到对应元素，这里采取横向遍历，减少计算量

insertNode实现：根据要插入节点的parentId，找到父节点，然后把要插入的节点加入到父节点数组中

generateRoot：每次向listTree树加入节点后，在目标数组中删除该元素，直到目标数组为空

代码如下：

class listTree{constructor(arr){this.root = new Node(arr.find(item => item.parentId === 0))this.generateRoot(arr)}generateRoot(arr){let arrRest = arr;let self = this;let rootIndex = arr.findIndex(item => item.parentId === 0)arrRest.splice(rootIndex,1)reduceArrRest()function reduceArrRest(){arrRest.forEach((node,index) => {let result = self.insertNode(new Node(node),node.parentId)if(result){arrRest.splice(index,1)}})// 有剩余的元素没有插入到树结构， 继续循环插入if(arrRest.length > 0){reduceArrRest()}}}getNodeById(id){if(this.root && this.root.id === id){return this.root}let targetNode = null;compareNodeId(id,this.root.childNodes)return targetNode;function compareNodeId(id, NodeList){// 在遍历下一个节点时，先判断是否已经找到targetNodeif(targetNode){return targetNode}// 先遍历NodeList数组（采取的广度遍历）for ( let node of NodeList){if(node.id === id){targetNode = nodebreak}}// NodeList数组中没找到，再到NodeList每个node的child中查找if(!targetNode){for ( let node of NodeList){if(node.childNodes.length>0){compareNodeId(id,node.childNodes)}}}return targetNode}}insertNode(node, id){let targetNode = this.getNodeById(id)if(targetNode){targetNode.childNodes.push(node)return true} else {return false}}
}

4, 实现树结构转化为数组

递归遍历树结构

class listTree{constructor(arr){this.root = new Node(arr.find(item => item.parentId === 0))}// ...toArray(){let list = [];pushNode(this.root)function pushNode(node){let { id, parentId, name } = node;list.push({id, parentId, name})if(node.childNodes.length>0){for ( let nodeItem of node.childNodes){pushNode(nodeItem) }}}return list}
}

以上就实现了基本的功能

demo

function listToTree(arr){let ListTree = new listTree(arr)console.log(JSON.stringify(ListTree.root,null, 2))console.log(JSON.stringify(ListTree.toArray(),null,2))
}listToTree(list)

运行结果：

树结构：

{"id": 1001,"parentId": 0,"name": "AA","childNodes": [{"id": 1002,"parentId": 1001,"name": "BB","childNodes": [{"id": 1007,"parentId": 1002,"name": "GG","childNodes": []},{"id": 1006,"parentId": 1002,"name": "FF","childNodes": []}]},{"id": 1003,"parentId": 1001,"name": "CC","childNodes": [{"id": 1005,"parentId": 1003,"name": "EE","childNodes": [{"id": 1009,"parentId": 1005,"name": "II","childNodes": []}]},{"id": 1004,"parentId": 1003,"name": "DD","childNodes": [{"id": 1008,"parentId": 1004,"name": "HH","childNodes": []}]}]}]
}

数组：

[{"id": 1001,"parentId": 0,"name": "AA"},{"id": 1002,"parentId": 1001,"name": "BB"},{"id": 1007,"parentId": 1002,"name": "GG"},{"id": 1006,"parentId": 1002,"name": "FF"},{"id": 1003,"parentId": 1001,"name": "CC"},{"id": 1005,"parentId": 1003,"name": "EE"},{"id": 1009,"parentId": 1005,"name": "II"},{"id": 1004,"parentId": 1003,"name": "DD"},{"id": 1008,"parentId": 1004,"name": "HH"}
]

总结：树结构的形式有很多，不过还是会归结到树节点，树方法上。