date: 2022-04-14
description: 针对项目中出现树形结构数据的时候，我们怎样去操作他
项目中我们会经常出现对树形结构的遍历、查找和转换的场景，比如说DOM树、族谱、社会机构、组织架构、权限、菜单、省市区、路由、标签等等。那针对这些场景和数据，我们又如何去遍历和操作，有什么方式或者技巧可以简化我们的实现思路。下面我们将针对常规出现的场景去总结一下我们的遍历方式
树的特点
1、每个节点都只有有限个子节点或无子节点；
2、没有父节点的节点称为根节点；
3、每一个非根节点有且只有一个父节点；
4、除了根节点外，每个子节点可以分为多个不相交的子树；
5、树里面没有环路
下面的图片表示一颗树
在下面的JS中我们由多棵树组成我们的数据
在这数据中我们如何评判数据是否为叶节点（也就是最后一级），我们每个节点都会存在children属性，如果不存在children属性或者children不是一个数组或者children为数组且长度为0我们则认为他是一个叶节点
我们针对树结构的操作离不开遍历，遍历的话又分为广度优先遍历、深度优先遍历。其中深度优先遍历可以通过递归和循环的方式实现，而广度优先遍历的话是非递归的
从上往下对每一层依次访问，在每一层中，从左往右（也可以从右往左）访问结点，访问完一层就进入下一层，直到没有结点可以访问为止。即访问树结构的第n+1层前必须先访问完第n层。
简单的说，BFS是从根节点开始，沿着树的宽度遍历树的节点。如果所有节点均被访问，则算法中止。
所以我们的实现思路是，维护一个队列，队列的初始值为树结构根节点组成的列表，重复执行以下步骤直到队列为空：
取出队列中的第一个元素，进行访问相关操作，然后将其后代元素（如果有）全部追加到队列最后。
深度优先搜索算法（英语：Depth-First-Search，DFS）是一种用于遍历或搜索树或图的算法。这个算法会尽可能深的搜索树的分支。当节点v的所在边都己被探寻过，搜索将回溯到发现节点v的那条边的起始节点。这一过程一直进行到已发现从源节点可达的所有节点为止。如果还存在未被发现的节点，则选择其中一个作为源节点并重复以上过程，整个进程反复进行直到所有节点都被访问为止
1、先序遍历
访问子树的时候，先访问根再访问根的子树
2、后序遍历
访问子树的时候，先访问子树再访问根
1、先序遍历
先序遍历与广度优先循环实现类似，要维护一个队列，不同的是子节点不追加到队列最后，而是加到队列最前面
2、后序遍历
后序遍历就略微复杂一点，我们需要不断将子树扩展到根节点前面去，执行列表遍历，并且通过一个临时对象维护一个id列表，当遍历到某个节点如果它没有子节点或者它本身已经存在于我们的临时id列表，则执行访问操作，否则继续扩展子节点到当前节点前面
对于树结构的遍历操作，其实递归是最基础，也是最容易理解的。递归本身就是循环的思想，所以可以用循环来改写递归,以上的方式在项目中已经廊括了大部分的场景了，我们在日常开发中可以根据场景或者需要去选择我们的遍历方式，或者基于此对他进行调整和优化，至于每种方式的空间复杂度和时间复杂度我们在这个地方就不去尝试了，各位感兴趣可以自己去验证。
广度优先搜索
树的遍历
深度优先搜索
图文详解两种算法：深度优先遍历（DFS）和广度优先遍历（BFS）
二叉树遍历（前序，后序，中序，层次）递归与迭代实现JavaScript
JS树结构操作:查找、遍历、筛选、树和列表相互转换
先看看leetcode上的几道题目，关键字 层序遍历 ，其实就是把一棵树一层一层地遍历，取出每一个节点。当然从根节点到叶子节点，从叶子节点到根节点，每层从左到右，从右到左……都可以衍生成不同的题目。
102. 二叉树的层序遍历
107. 二叉树的层序遍历 II
429. N 叉树的层序遍历
这一类的题目，被归纳在leetcode的 广度优先搜索 标签下
这一类的题目，总结起来可以套用模板来解决，我们需要借用一下数据结构的知识：
队列 ：先进先出，后进后出
在JavaScript中，我们会使用 数组Array 来模拟队列：
先初始化一个 二叉树
先看看102的题目
解题：
从以上例子，只要步骤是：
有一个细节要注意：
这里用的是 pop() 和 unshift() ，是因为队列先进先出的特点，pop()从最后面弹出一个元素，unshift()把新元素放到最前面。 push() 和 shift() 搭配也有相同效果。
107的题目稍微改变了一下，要求输出是[[15,7], [9,20], [3]]，可以看出，就是把102的从上到下输出每一层节点，改成从下到上输出，首先想到的就是把102的数组反转就可以了。
但是，我们可能直接在保存结果数组的时候处理一下：
102中，我们使用 push() 把每一层的节点放入结果数组
107中，结果数组和102的反转了，所以，我们可以把 push() 改成 unshift() 即可，最后得到的结果就是，树的要节点那层在结果数组的最后，叶子节点在最前面。
429题中把二叉树改成了N叉树，树的结构发生了变化
但是可以看到，和二叉树的数据结构相比，就是把left和right合成children，那么在我们的模板中，也只需要修改一下
改成
这样就可以得到结果了。
想一下，如果再改一下：如何从右到左遍历每一层节点？层数是单数时从左到右，层数是双数时从右到左？
再扩展一下，这个算法能做什么呢？
当我们玩游戏，特别是走迷宫之类的游戏，是不是会从一个点出发，然后判断下一步能不能走，直到找出终点？BFS也是寻路方案的基础。
推荐一下leetcode上的总结：
二叉树层序遍历登场：我要打十个！
