js数组转换拼接成树结构

JavaScript010

js数组转换拼接成树结构,第1张

前端数组转为树结构在我们平时开发中经常遇到,主要用到了递归回调。下面的做法可提供一种转换思路。

我们拿到的数据格式是

我们想要用来渲染页面的格式是

第一步,找出最上面的节点。很明显的parentId为空的数据是最上面的节点。

第二步,找出第二节点加到父节点child数组里面

newList 就是我们的结果。

步骤二三也可以这样处理,可以防止curList.length的值不为空的时候无限循环回调

1、数组转换为树结构

对象数组一定要按照id值排好序,每个对象id唯一,但不同对象的parentId可以相同,可根据parentId找到其父元素。

2、将树结构转换为数组

这里用到广度优先搜索和队列这种数据结构

在实际的工作和业务需求中,我们经常会碰到树形数据结构,比如公司组织架构、组织层级、省市县或者事物的分类等等数据。那么在JavaScript中如何将数组转为树形结构和树形结构转为数组,本文就详细的来探究一下。

先来看看给出了一组怎样的数据,转换为怎样的树形结构。

后台接口返回或者面试官给你的数据:

期望的处理后的数据:

如果后台给了一个这样的数据说让前端自己去转换为树形结构或者面试官给你一组这样的数据让你手写一个转换方法,你会怎么处理?

1、递归实现

2、Map对象实现

3、filter实现

这种方法很有意思,可能大多数人想不到,也是从大佬处学到的(读书人的是怎么能叫抄呢,应该叫“窃”)。

1、reduce取树行数据的所有子集

2、递归实现

3、广度优先遍历法