如何将具有父子关系的数据快速变成树结构

在项目中,数据库中的父子关系数据通常通过'parentId'关联。当后端返回数组数据时,前端需要将其转换为树形结构。遍历数据的效率低下,不被推荐。文章提出两种高效方法:1. 数据扁平化,利用id关联数据;2. 根据parentId对数据分组,直接挂载到对应节点。
摘要由CSDN通过智能技术生成
在实际项目中,经常会碰到类似的场景,举个例子,很多情况下,数据库中存在父子关系的数据保存在一张表里,而关联关系通过"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: 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值