在实际项目中,经常会碰到类似的场景,举个例子,很多情况下,数据库中存在父子关系的数据保存在一张表里,而关联关系通过"parentId"属性进行关联,后端在数据查询时,会得到一个数组,此时前端可能需要将数据展示为树状结构,例如一个中后台的权限数据。
-
很多开发者采用的方式是一遍一遍的遍历数据,比如第一次遍历找到根节点,接着再遍历数据找到根节点的子节点,再遍历数据找到其个子节点的子节点,即使是把已经找到的数据从源数据中剔除后遍历剩余的数据,效率一样非常低,所以强烈不推荐此做法。故而省略代码。
-
推荐做法1,将数组扁平化,因为每一条数据都有唯一的id,每条数据又是引用类型,故而可以将id和数据关联起来,从而通过扁平的数据结构可以快速获找到对应的数据,而不是遍历大量的数据去找到某一条数据,具体做法如下。
// 数组数据,此处假使具有唯一的根节点
const array = [
{
id: 1, parentId: null, code: '1', text: '1'},
{
id: 2, parentId: 1, code: '2', text: '2'},
{
id: 3, parentId: 1, code: '3', text: '3'},
{
id: