js树形结构数据扁平化(全网最详细解析)

我的上一篇文章普通对象数组转树形结构是我的第一篇文章,本篇文章是js树形结构数据扁平化，我也是一个刚开始写文章的新人，写的不好的地方请大家多多包涵,多多指导。好的，废话不多说，开始我们今天的内容.

首先同学们看向下边的我写的树形结构数据：（左下角连接右上角.因为我直接复制上来代码背景白茫茫的怕大家看着不舒服.）

现在我们要这些数据转成扁平化类型的数据,也就是我们正常的数组形式.下面是我们要的最终结果

首先我先给大家简单说一下我的思路,放眼望去，这个数据是一级数据的children下面包含着二级数据，二级数据children下面包含着三级数据.那么我们需要把他们变成同级数据 我们是不是需要把每一级下面的children里面的数据都拿出来放到第一层然后给他加一个parentId属性方便我们识别和后续的操作。我说到这里，同学们是不是已经有大致的思路了呢。下面我给大家介绍两种写法：

第一种写法: 

我给大家解析一下这段代码: data就是我们原始的arr，parentId 一上来是没有的默认是undefined，res初始值也为空，res就是我们最终输出结果的数组. 首先循环这个数组把item的id,parentId,name都push到数组中，这个时候res中push的就是data中最外层的也就是第一层级的第一个对象也就是id为001的这一项  此时的res的值是 [ { id: '001', parentId: undefined, name: 'zs' } ] 那么我们这时候再来看id为001的这一项是不是里面还有一个children（如下图），我们需要把他里面的数据也取出来放在第一层级.  这时候我们看在代码里面我们应该怎么处理，我们可以写一个判断，如果他的item里面有children且长度不是0，我们就再次调用我们上面的这个treeToArr方法把他的children传进去，然后在push到res里面不是就可以了吗？对不对，我们接着往下看.

上面我们说了当我把item的children传进去的时候这个时候我们item.children也会被循环然后拿到他的id，parentId和name再push到res中。那我们看看现在的res里面是什么呢？我输出了一下结果(如下)

[
  { id: '001', parentId: undefined, name: 'zs' },
  { id: '001-1', parentId: '001', name: 'zs-1' }
]

哎，这不就是我们要的效果吗? 那么如果说children下面还有children呢，我们这样是不是也没有问题因为我们下边有写的判断什么时候你没有children或者children的长度为0的时候,我们什么时候停止。如果遍历到最后一层也就是没有children或者children的值为空。我们在遍历处理开始002的项，一直到children为空或者不存在。那么我们再看一下我们最终输出的结果。哎，我们发现就是一开始我们需要的最终结果。这样我们在完成了树形数据的扁平化.

第二种方法：

我先上代码，看看同学们可不可以看懂.

这里我们还可以用reduce来解决，我们都知道reduce是可以来做累加器的。我们先简单说一下，reduce有两个参数回调函数和初始值，回调函数接受4个参数：上次积累值、当前项、当前下标、当前数组。这里我们只用前两个参数就行.第一次刚进来的时候res为空，第一次进来的时候是id为001的当前项然后res.push（{id，parentId，name}）之后res数组就是[ { id: '001', parentId: undefined, name: 'zs' } ] ，其实下面的逻辑也是一样判断他的children是否存在.然后再次放到treeToArr中去处理。最后在把res和他们的值合并.也可以完成我们想要的效果.其实这两种方法思路都是一样的,只不过第一种呢是通过遍层层把数据拿出来.而第二个是通过reduce累加器来一次一次的来累加数据.但是最终都能达成我们想要的效果. 文章完毕. 觉得小编写的还行的.点个赞吧！！！.