前端程序员必备技能 —— 洗数据

1,079 阅读3分钟

作为一名合格的程序员,不管是后端还是前端,对于数据的处理总是必须具备的一项能力,下面我们针对后台传递数据为一维数组,我们要根据里面的parentId来构建嵌套的结构进行解析...

分析数据结构

首先我们看下图:

递归.png
后台给我们传递数据,无非要么是左边的格式,要么是右边的格式,这个时候作为前端,就必须对这两种结构熟悉,左边的明显很整齐,而且不存在children嵌套之类的,故我们称之为一位数组结构,右边的我们可以看到,是有children属性并且可以进行没有次数限制的嵌套,我们称之为树型结构。下面我们继续分析

形象化理解

一维数组相比树型,少了children树型,但是多了parentId树型,形象一点理解的话,就好比是一维数组结构就是有一堆走失儿童,问他们他们只知道自己的爸爸(parentId)是谁,相当于从小到大的映射关系,而树型结构则相反,是一个从大到小的映射,每一个元素更像一个父亲,知道自己的孩子(children)是谁,下面我们就开始转换

一维数组结构 => 树型结构

讲这个之前,我们先来举个还珠格格里有点荒谬的例子,就是皇后娘娘为了家伙紫薇小燕子而故意做的布娃娃,并且再布娃娃上扎针,意即谋害皇上,虽说现实中这样的迷信是不可取的,但是在程序里面因为可以用多个指针指向同一对象或数组的例子,所以是可以实现的,正如上面所说,每个元素都是一个小孩,并且除了第一个根元素外,每一个节点都是有parentId属性的,也就是说除了第一个,都知道自己的父亲是谁。

那么我们可以这么做,首先对该一维数组进行遍历,将他们唯一的区别,也就是id值给提取出来,然后实现用id值作为这个指针,指向他对象的那个对象,相当于给每个孩子建立了一个布娃娃。同时,我们给每个孩子加一个属性 ———— children,默认都是一个空数组即可,我们可以理解为一个小房间

接下来,我们对这些孩子挨个就行点名,也就是遍历整个数组,在遍历的过程中,我们首先也会新建也给数组,相当于新开了一间屋子,用来存储最后的结果用的。

首先判断,这个孩子知不知道他父亲的名字,假如他不知道,或者乱说的,比如时-1之类的,那么我们就可以直接让这个孩子去到这新建立的这间屋子,同时,假如他知道自己的父亲是谁,那么就应该直接让这个孩子去到对应父亲的房间(children)里,就这样,挨个进行遍历完了之后,最终,我们新建立的这个房间也就保存了最后的结果。

不知道大家看过杂技一堆人骑一个自行车不,这个最终得到的结果就和那个差不多。 上代码:

arr.png

树型结构 => 一维数组结构

这个比较简单,在此不做过多讨论