我报名参加金石计划1期挑战——分割10万奖池，这是我的第1篇文章，点击查看活动概况
☀️ 前言
- 我们好我是小卢，是不是经常见到这样的树状结构，咱们有时需求对这个结构进行“增加，删去，修正”等处理，但每每遇到这种结构就会很容易犯错。
- 小卢：大佬，这种树状结构我做数据处理好麻烦呀，又要遍历又要拆解，而且好容易犯错。
- 大佬：你白痴啊，你直接拍扁不就好了？
- 大佬：这是你自己的问题吧，写得这么烂。
- 小卢：拍…拍扁？对喔
奇妙的扁平树状结构
- 咱们平常见到的树状结构一般都是这样的，每层数组中的
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即可。
写在最终
- 咱们能够发现将整个结构扁平化后收益特别多。
- 结构很明晰，咱们能够很轻易的对数据进行处理。
- 特别是在特别大数据量的情况下，这种方式能够极大的进步功能，减去需求遍历的功能耗费。
- 曾经各种在数组目标出现的坏处都消失了。
- 这下我知道为什么之前会被大佬骂了，可是我也变强了，这次记录一下分享给我们。
- 如果您觉得这篇文章有帮助到您的的话不妨重视+点赞+保藏+谈论+转发支撑一下哟~~您的支撑就是我更新的最大动力。
- 如果想跟我一同评论和学习更多的前端常识能够加入我的前端交流学习群，我们一同畅谈全国~~~
往期精彩
入职Apifox研发组半年，我所提高的软技术 43
入职Apifox研发组三个月，我领悟了30个高效开发办法 1091
面试官:你觉得你最大的缺点是什么? 293
几个一看就会的实用JavaScript优雅小技巧 640
