JavaScript 数组结构与树结构的转换

最近找到一个VUE的文档,它将VUE的各个知识点进行了总结,整理成了《Vue 开发必须知道的36个技巧》。内容比较详实,对各个知识点的讲解也十分到位。有需要的小伙伴,可以点击下方卡片领取,无偿分享。
摘要由CSDN通过智能技术生成

前言

作为前端开发的同学,在与后端进行数据联调的时候,我们前端的同学处理Array数组结构的数据是最多的,listtablecard各种需要遍历的展示显示我们都会用数组来处理。当数组中涉及层级嵌套是我们的数组结构就需要进行Tree树结构的转化,常见的有目录树组件,区域选择组件等等。

这种树结构数据,前后端都可以处理,当有时候后端就是返回一个数组让前端处理的时候,我们就可以直接处理就行了。

Array结构 转 Tree结构

例如: 我们要把下面这种数组结构的转化为像tree那样嵌套的结构

/** 数组结构数据 */
const arrayData = [{ id: 2, title: '中国', parent_id: 0 },{ id: 3, title: '广东省', parent_id: 2 },{ id: 4, title: '广州市', parent_id: 3 },{ id: 5, title: '天河区', parent_id: 4 },{ id: 6, title: '湖南省', parent_id: 2 },{ id: 1, title: '俄罗斯', parent_id: 0 }
] 

使用递归的方法

  • 1、递归需分为两个函数来完成
  • 2、 以为返回的递归函数主要处理查找id添加children
  • 3、 由转化函数将结果返回
/**
 * 递归查找添加children
 * @pa
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值