JS树结构数据的遍历

title: JS树结构数据的遍历

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树结构 *** 作:查找、遍历、筛选、树和列表相互转换

$fnzTreeinit($("#treeDemo"), setting, zNodes);

zTree = $fnzTreegetZTreeObj("treeDemo");

var nodes=zTreegetNodes();

var nodes_array = zTreetransformToArray (nodes);

for(var i=0;i<nodes_arraylength;i++){

alert(nodes_array[i]name);

}

//下面是api，自己不会看么，zTreeObjgetNodes是所有节点数据都在里面，自己不会取，就不要瞎叫唤，自己可以用火狐看里面的数据是不是都有

zTreeObjgetNodes

概述[ 依赖 jqueryztreecore 核心 js ]

获取 zTree 的全部节点数据

请通过 zTree 对象执行此方法。

Function 参数说明

返回值Array(JSON)

全部节点数据

1、Array 仅仅是根节点的集合（默认情况子节点都处于 children 属性下）；

2、如需遍历全部节点需要利用递归，或利用 transformToArray 方法 将数据变成简单的 Array 集合

3、对于异步加载模式下，尚未加载的子节点是无法通过此方法获取的。

function 举例

1 获取全部节点数据

var treeObj = $fnzTreegetZTreeObj("tree");

var nodes = treeObjgetNodes();

不知道问题指的是什么路径，这里回答一个获得JTree实现的文件树的某一节点文件路径的例子，希望能有帮助。

重写节点类的toString()，在TreeSelectionListener中获取当前节点对象，这时候toString()就是当前路径：

DefaultMutableTreeNode mutableTreeNode=(DefaultMutableTreeNode)getLastSelectedPathComponent();

String chooseUrl=mutableTreeNodetoString();

当然，这时候节点Node类也得自定义，比如这样：

class FileNode{

    public boolean isInit;

    public boolean isSystemRoot;

    public String name;

    public Icon icon;

    public String filePath;

    public FileNode(String name,Icon icon,String filePath,boolean isSystemRoot){

        thisname=name;thisicon=icon;thisfilePath=filePath;thisisSystemRoot=isSystemRoot;

    }

    //重写toString获取当前节点路径

    @Override

    public String toString(){

        return thisfilePath;

    }

}

（1）如获得id为test标签子元素的个数：

documentgetElementById("test")ChildNodeslength

documentgetElementById('test')childrenlength

（2）上面两种方法皆可来获得子元素的个数，但是要注意各个浏览器的差异性，也得斟酌下差异性

DOM(即 Document Object Mode) 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型

XML DOM - 针对 XML 文档的标准模型

HTML DOM - 针对 HTML 文档的标准模型

以上就是关于JS树结构数据的遍历全部的内容，包括:JS树结构数据的遍历、ztree中如何获取所有节点、如何获得Jtree中某个节点的路径等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！