树状结构

340 阅读3分钟

🤔 奇妙的扁平树状结构

我们平时见到的树状结构一般都是这样的,每层数组中的item都会有一个children,里面嵌套一个数组然后每个子item也还会有各自的children,就这样一直嵌套下去。

而拍扁后的树状结构其实是一个对象,每个item都扁平化平铺在第一层,每一个item都有各自的parentId与childrenIds。

❓ 有什么不同

父节点

在第一种结构中其实没有专门的根节点,在最外层的数组中每一项都是第一层级的父节点。

而在第二种结构中一般都会有一个item专门来表示根节点,就比如这个对象第一行id为root的item。

子节点

在第一种结构中我们的子节点都是在父节点的children数组下的每一项,而每一项还会有各自的子节点存在于对应的children中。

而在第二种结构中每一项都可以当成是子节点,他们各自都拥有一个parentId,而根节点的parentId为空代表它没有父节点,他们的各自的childrenIds存储了他们各自item的子节点id。

渲染

就拿react来举例,我们一般渲染一个列表都是通过map进行遍历渲染,拿到对应的item通过itemRender()来处理对应的ReactNode,在渲染中其实两种状态的使用相差不大。

添加

在数组对象形式中我们需要给一个父节点添加一个子节点我们首先需要拿到这个父节点的key,然后对整个数组结构进行遍历查找来找到对应的item拎出来push进他的children中,然后需要重新构造一个新的数组对象。

由于实在是太麻烦了我就列了大概思路,相信大家都会,我们会发现非常繁琐,接下来我会着重讲一下Map形式。

而在Map形式中我们不需要递归循环遍历整课树,可以发现,在整个结构中数据的表现是非常清晰的,每个item都是一样的。

我们首先在Map新增一条子项数据,直接放在数据结构末尾即可,然后我们再给对应的父节点的childrenIds中push这个子项的id即可。

和上面那种形式对比感觉如何呢,我个人感觉是方便太多了。

修改

在数组对象形式中我们想修改某一个节点的title的时候,我们需要根据key遍历找出这个节点然后修改最后构造新的数组结构。

而在Map形式我们拿到想修改的id后就可以直接修改。

删除

在数组对象形式中我们需要删除一个节点的时候,还是很繁琐,先遍历再删除构造新的数组,想想都已经很麻烦了。

而在Map形式中我们直接delete对应id的项即可,如果该项有父节点,我们可以在对应parentId项中的childrenIds移除对应的id即可。