我被骂了，但我学会了如何构造高性能的树状结构🔥

我报名参加金石计划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👍🏻