将类似如下数据转换成树形的数据:
[{ id: 1, name: '1', },{ id: 2, name: '1-1', parentId: 1 },{ id: 3, name: '1-1-1', parentId: 2 },{ id: 4, name: '1-2', parentId: 1 },{ id: 5, name: '1-2-2', parentId: 4 },{ id: 6, name: '1-1-1-1', parentId: 3 },{ id: 7, name: '2', }]
转换方法为:
function translateDataToTree(data) {let parents = data.filter(value => value.parentId == 'undefined' || value.parentId == null)let children = data.filter(value => value.parentId !== 'undefined' && value.parentId != null)let translator = (parents, children) => {parents.forEach((parent) => {children.forEach((current, index) => {if (current.parentId === parent.id) {let temp = JSON.parse(JSON.stringify(children))temp.splice(index, 1)translator([current], temp)typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]}})})}translator(parents, children)return parents }
转换后数据是:
[{"id": 1,"name": "1","children": [{"id": 2,"name": "1-1","parentId": 1,"children": [{"id": 3,"name": "1-1-1","parentId": 2,"children": [{"id": 6,"name": "1-1-1-1","parentId": 3}]}]},{"id": 4,"name": "1-2","parentId": 1,"children": [{"id": 5,"name": "1-2-2","parentId": 4}]}]},{"id": 7,"name": "2"} ]
思路:将有父子关系的数组数据先分为两类,一类是没有父节点的数据(取个别名parents),另一类是有父节点的数据(取个别名children),然后通过遍历parents,对每一个父节点在children查找对应的子节点,并将其放入父节点的children中(这里我的是以children表示子节点),然后每个子节点又作为一个父节点来重复之前的动作。(可能这里描述的不太清楚,下面我将对方法进行注释说明)
/*** 该方法用于将有父子关系的数组转换成树形结构的数组* 接收一个具有父子关系的数组作为参数* 返回一个树形结构的数组*/ function translateDataToTree(data) {//没有父节点的数据let parents = data.filter(value => value.parentId == 'undefined' || value.parentId == null)//有父节点的数据let children = data.filter(value => value.parentId !== 'undefined' && value.parentId != null)//定义转换方法的具体实现let translator = (parents, children) => {//遍历父节点数据parents.forEach((parent) => {//遍历子节点数据children.forEach((current, index) => {//此时找到父节点对应的一个子节点if (current.parentId === parent.id) {//对子节点数据进行深复制,这里只支持部分类型的数据深复制,对深复制不了解的童靴可以先去了解下深复制let temp = JSON.parse(JSON.stringify(children))//让当前子节点从temp中移除,temp作为新的子节点数据,这里是为了让递归时,子节点的遍历次数更少,如果父子关系的层级越多,越有利temp.splice(index, 1)//让当前子节点作为唯一的父节点,去递归查找其对应的子节点 translator([current], temp)//把找到子节点放入父节点的children属性中typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]}})})}//调用转换方法 translator(parents, children)//返回最终的结果return parents }