JavaScrip树形控件数据构造的通用方法

当需求使用属性控件时，有时接口的返回数据是一维数组时，我们需要整理数据成多维数组，封装一个通用的高效方法。

当返回的数据是当前数据时：

const  arr=[
　　{id:11,parentId:1},
　　{id:12,parentId:1},
　　{id:1,parentId:4},
　　{id:2,parentId:3},
　　{id:3,parentId:4},
　　{id:21,parentId:2},
　　{id:22,parentId:2},
　　{id:23,parentId:2},
 　　{id:4,parentId:null},
]

那么我们现在需要的就是把这些一维数组转成我们所需的多维数组（树形控件的数组）

想法：

首先遍历data数据，然后我们找到当前元素的父元素，在父元素上添加子元素(child)，如果当前元素没有父元素，则就是根元素

建立数组的索引映射关系(可以取唯一字段)

建立映射关系是为了我们更快的找到元素的位置，方便找到父元素的引用

const idMap = arr.reduce((acc,el,i)=>{
　　acc[el.id]=i;
　　return acc
},{})

映射结果如下：

{
　　1: 2
　　2: 3
　　3: 4
　　4: 8
　　11: 0
　　12: 1
　　21: 5
　　22: 6
　　23: 7
}

构造树形结构

现在，我们开始构造树形结构的数据格式。遍历这个对象数组，找到每个元素的父元素对象，然后添加对这个元素的引用

let root;
arr.forEach(el=>{
   //判断根节点
   if(el.parentId === null){
       root = el;
       return; 
    }
   //用映射找到父元素
　　const parentEl = arr[idMap[el.parentId]]
　　//把当前元素添加到父元素的children数组中
　　parentEl.children=[...(parentEl.children || []),el] 
})

好了，我们的树形结构的数组就构造结束了，打印看一下我们最终的数据

console.log(root)

 

！！！注意，按照本人实战经验，该方法在parentId:null如果有多个的情况下，最终的返回结果只会有一个根节点，且为null的最后一个数据（如有错误，欢迎指正）