导航:首页 > 编程语言 > js遍历树节点

js遍历树节点

发布时间:2023-05-14 15:59:28

js树形结构如何从最深层往上匹配

一、树结构

定义一颗树,JS中常见的树形数据结构如下,children属性对应的是子树

let tree = [
{
id: '1',
name: '节点1',
children: [
{
id: '1-1',
name: '节点1-1'
}
]
},
{
id: '2',
name: '节点2',
children: [
{
id: '2-1',
name: '节点2-1'
},
{
id: '2-2',
name: '节点2-2',
children: [
{
id: '2-2-1',
name: '节点2-2-1'
}
]
}
]
},
{
id: '3',
name: '节点3'
}
]
二、深度优先遍历(DFS)

1、递归实现

function treeIterator(tree, func) {
tree.forEach((node) => {
func(node)
node.children && treeIterator(node.children, func)
})
}
实现逻辑简述:定义treeIterator函数,传入tree(树)和func(回调函数)两个参数,遍历tree数组,执行回调函数,如果当前节点存在children,则递归调用。

函数调用验证:调用treeIterator函数,传入上文定义好的树结构数组,打印出每个节点的name值。

treeIterator(tree, (node) => {
console.log(node.name)
})
控制台打印结果如下:

2、循环实现

function treeIterator(tree, func) {
let node, curTree = [...tree]
while ((node = curTree.shift())) {
func(node)
node.children && curTree.unshift(...node.children)
}
}
实现逻辑简述:

(1)定义node作为当前节点,curTree为传入的树(不影响原数组tree);

(2)执行while循环,curTree数组第一个元素从其中删除,并返回第一个元素赋值给node;

(3)①执行回调函数;②如果当前节点存在子树,则追加到curTree数组的开头,继续执行循环,直到curTree没有元素为止。

函数调用验证:参考上述递归实现验证,方式和结果一致。

三、广度优先遍历(BFS)

function treeIterator(tree, func) {
let node, curTree = [...tree]
while ((node = curTree.shift())) {
func(node)
node.children && curTree.push(...node.children)
}
}
实现逻辑简述:和上述深度优先遍历的循环实现差不多。区别在于如果当前节点存在子树,则追加到list数组的末尾。

② 求最简单的方法进行原生js 循环遍历树(json数据)

递归吧般树都递归

③ js的树形结构怎么实现

这个问题,我建议你去下载下树形菜单。网上已经实现的js很多,下载下来一看就明白了,

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

⑤ js,树形数组 遍历获取某个节点,跪求大神

这就是最基础的遍历

varGetByID=function(Data,ID)
{
varDeep,T,F;
for(F=Data.length;F;)
{
T=Data[--F]
if(ID===T.id)returnT
if(T.children)
{
Deep=GetByID(T.children,ID)
if(Deep)returnDeep
}
}
}

GetByID(a,'2016')

⑥ JS中的二叉树遍历

栈、队列、链表等数据结构,都是顺序数据结构。而树是非顺序数据结构。树型结构是一类非常重要的非线性结构。直观地,树型结构是以分支关系定义的层次结构。

二叉树(Binary Tree)是另一种树型结构,它的特点是每个结点至多只有两棵子树(即二叉树中不存在度大于2的结点),并且,二叉树的子树有左右之分(其次序不能任意颠倒。)

遍历二叉树(Traversing Binary Tree):是指按指定的规律对二叉树中的每个结点访问一次且仅访问一次。

二叉树有深度遍历和广度遍历, 深度遍历有前序、 中序和后序三种遍历方法。二叉树的前序遍历可以用来袭告显示目录结构等;中序遍历可以实现表达式树,在编译器扰禅链底层很有用;后序遍历可以用来实现计算目录内的文件及其信息等。

上述二叉树(a+b*c)-d/e在js中可以用对象的形式表示出来:

先递归遍历左子树,从最左的一个左子树存入数组;然后回溯遍历双亲结点,再是右子树,这样递归循环。

将当前结点压入栈,然后将左子树当做当前结点,如果当前结点为空,将双亲结点取出来,将值保存进数组,然后将右子树当做当前结点,进行循环。

先走左子树,缓孙当左子树没有孩子结点时,将此结点的值放入数组中,然后回溯遍历双亲结点的右结点,递归遍历。

广度优先遍历二叉树(层序遍历)是用队列来实现的,广度遍历是从二叉树的根结点开始,自上而下逐层遍历;在同一层中,按照从左到右的顺序对结点逐一访问。

js 中二叉树的深度遍历与广度遍历(递归实现与非递归实现)
二叉树与JavaScript

阅读全文

与js遍历树节点相关的资料

热点内容
怪物猎人ol新版本弩炮 浏览:380
开发app标准流程有哪些 浏览:319
党委任命人员文件格式 浏览:196
如何qq离线文件 浏览:304
编程沈阳哪里招生 浏览:329
threeredapples 浏览:291
html网站练习素材 浏览:216
win10默认不启动文件共享 浏览:455
大数据架构如何部署 浏览:95
cnc编程工厂怎么干活 浏览:705
ps无法导出png格式的文件格式 浏览:268
苹果air2插卡价格 浏览:626
qq头像男生图片大全 浏览:164
文件控制电脑 浏览:220
pdf文件页数怎么读 浏览:489
iphone的文稿与数据在哪个文件夹 浏览:918
把文件夹设置密码 浏览:895
网络电视遥控器怎么对接 浏览:169
海尔网站属于什么类型网站 浏览:565
数据结构要看哪个版本的 浏览:557

友情链接