一文了解树在前端中的应用，掌握数据结构中树的生命线_先序遍历在实际生活中的应用(4)

最新推荐文章于 2024-07-25 09:48:00 发布
最新推荐文章于 2024-07-25 09:48:00 发布
阅读量530 收藏 28
点赞数 15
分类专栏： 程序员 文章标签： 大数据 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84166236/article/details/138885173
版权

img
img
img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

        right:null
    }
},
right:{
    val:3,
    left:{
        val:6,
        left:null,
        right:null
    },
    right:{
        val:7,
        left:null,
        right:null
    }
}

}


**递归版本实现：**

// 递归版本实现
const preOrder1 = (root) => {
if(!root){
return;
}
console.log(root.val);
preOrder1(root.left);
preOrder1(root.right);
}

preOrder1(bt);
/**打印结果：
1
2
4
5
3
6
7
*/


**非递归版本实现：**

// 非递归版实现
/**
* 思路：
* 1.新建一个栈模拟函数的调用堆栈；
* 2.对于先序遍历来说，需要先把根节点取出，然后再遍历左子树了右子树；
* 3.按照栈的先进后出特点，先把右子树放进栈里，再把左子树放进栈里，一一取出。
*/
const preOrder2 = (root) => {
if(!root){
return;
}
// 新建一个stack代表函数的调用堆栈
const stack = [root];
// console.log(stack)
while(stack.length){
// 将根节点从栈里弹出
const n = stack.pop();
console.log(n.val);
if(n.right){
stack.push(n.right);
}
if(n.left){
stack.push(n.left);
}

}

}

preOrder2(bt);
/**打印结果：
1
2
4
5
3
6
7
*/


#### （2）JS实现二叉树的中序遍历


对于二叉树的中序遍历来说，是先访问**左**子树，之后访问**根**节点，最后再访问**右**子树。下面我们用两种方式来实现中序遍历，第一种是**递归版本**，第二种是**非递归版本**。


同样地，我们先来**先定义一棵树：**

const bt = {
val:1,
left:{
val:2,
left:{
val:4,
left:null,
right:null
},
right:{
val:5,
left:null,
right:null
}
},
right:{
val:3,
left:{
val:6,
left:null,
right:null
},
right:{
val:7,
left:null,
right:null
}
}
}


**递归版本实现：**

// 递归版本实现
const inOrder1 = (root) => {
if(!root){
return;
}
inOrder(root.left);
console.log(root.val);
inOrder(root.right);
}

inOrder1(bt);
/**打印结果：
4
2
5
1
6
3
7
*/


**非递归版本实现：**

// 非递归版实现
/**
* 思路：
* 1.新建一个栈模拟函数的调用堆栈；
* 2.对于中序遍历来说，需要先把左子树全部丢到栈里面；那么需要每当遍历一个，就推到栈里面
* 3.遍历完成之后，把最尽头的结点弹出，并访问它；此处最尽头的结点即尽头出的根节点，左根右
* 4.访问完左结点后，需要访问右结点；
*/
const inOrder2 = (root) => {
if(!root){
return;
}
let p = root;
const stack = [];
while(p || stack.length){
while§{
// 先进栈
stack.push§;
// 进栈完继续指向左子树
p = p.left;
}
// 弹出最后一个
const n = stack.pop();
console.log(n.val);
p = n.right;
}

}

inOrder2(bt);
/**打印结果：
4
2
5
1
6
3
7
*/


#### （3）JS实现二叉树的后序遍历


对于二叉树的后序遍历来说，是先访问**左**子树，之后访问**右**子树，最后再访问**根**节点。下面我们用两种方式来实现后序遍历，第一种是**递归版本**，第二种是**非递归版本**。


首先同样地，**先来定义一棵树：**

const bt = {
val:1,
left:{
val:2,
left:{
val:4,
left:null,
right:null
},
right:{
val:5,
left:null,
right:null
}
},
right:{
val:3,
left:{
val:6,
left:null,
right:null
},
right:{
val:7,
left:null,
right:null
}
}
}


**递归版本实现：**

// 递归版本实现
const postOrder1 = (root) => {
if(!root){
return;
}
postOrder1(root.left);
postOrder1(root.right);
console.log(root.val);
}

preOrder1(bt);
/**打印结果：
1
2
4
5
3
6
7
*/


**非递归版本实现：**

// 非递归版实现
/**
* 思路：
* 1.建立一个空栈stack；
* 2.分别把左子树，右子树分别放入stack栈
* 3.建立一个倒序栈outputStack，先把根树放进，再一一放入右子树，右子树全部放完之后再放左子树
*/
const postOrder2 = (root) => {
if(!root){
return;
}
// 倒序栈输出，放根右左的顺序，之后再一一取出
const outputStack = [];
// 先放左子树，再放右子树，方便后面取出
const stack = [root];
while(stack.length){
const n = stack.pop();
outputStack.push(n);
if(n.left){
stack.push(n.left);
}
if(n.right){
stack.push(n.right);
}
}
while(outputStack.length){
const n = outputStack.pop();
console.log(n.val);
}
}
preOrder2(bt);
/**打印结果：
1
2
4
5
3
6
7
*/


#### （4）总结


看完上面的代码实现后，我们来做个总结。**为什么这里要展示递归版本和非递归版本呢？**


事实上，在我们的日常开发中，递归遍历是非常常见的。但试想一下，有时候我们的业务逻辑有可能很复杂，那这个时候前端从后端接收到的数据量是比较大的。这个时候如果用递归版本来处理的话，算法复杂度相对来说就会比较高了。


所以我们多了一种非递归版本的实现方式，非递归版本的实现方式，旨在**以空间来换时间**，减少代码的时间复杂度。


## ☘️四、leetcode经典题目剖析


接下来我们引用几道经典的 `leetcode` 算法，来巩固树和二叉树的知识。


### 1、leetcode104二叉树的最大深度（简单）


**（1）题意**


附上题目链接：[leetcode104二叉树的最大深度](https://bbs.csdn.net/topics/618545628)


给定一个二叉树，找出其最大深度。


二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。


**说明:** 叶子节点是指没有子节点的节点。


**输入输出示例：**


* **输入**: 给定二叉树 `[3,9,20,null,null,15,7]`
* **输出**: 3


**（2）解题思路**


* 求最大深度，考虑使用深**度优先遍历**。
* 在深度优先遍历过程中，**记录每个节点所在的层级**，找出**最大的层级**即可。


**（3）解题步骤**


* 新建一个变量，记录最大深度。
* 深度优先遍历整棵树，并记录每个节点的层级，同时不断刷新最大深度的这个变量。
* 遍历结束返回最大深度的变量。


**（4）代码实现**

/**
* @param {TreeNode} root
* @return {number}
*/
let maxDepth = function(root) {
let res = 0;
const dfs = (n, l) => {
if(!n){
return;
}
if(!n.left && !n.right){
res = Math.max(res, l);
}
dfs(n.left, l + 1);
dfs(n.right, l + 1);
}
dfs(root, 1);
return res;
}


### 2、leetcode111二叉树的最小深度（简单）


**（1）题意**


附上题目链接：[leetcode111二叉树的最小深度](https://bbs.csdn.net/topics/618545628)


给定一个二叉树，找出其最小深度。


最小深度是从根节点到最近叶子节点的最短路径上的节点数量。


\*\*说明：\*\*叶子节点是指没有子节点的节点。


**输入输出示例：**


* **输入**: root = `[3,9,20,null,null,15,7]`
* **输出**: 2


**（2）解题思路**


* 求最小深度，考虑使用广度优先遍历。
* 在广度优先遍历过程中，遇到叶子节点，停止遍历，返回节点层级。


**（3）解题步骤**


* 广度优先遍历整棵树，并记录每个节点的层级。
* 遇到叶子节点，返回节点层级，停止遍历。


**（4）代码实现**

/**
* @param {TreeNode} root
* @return {number}
*/

let minDepth = function(root){
if(!root){
return 0;
}

const q = [[root, 1]];
while(q.length){
    const [n, l] = q.shift();

    if(!n.left && !n.right){
        return l;
    }
    
    if(n.left){
        q.push([n.left, l + 1]);
    }
    if(n.right){
        q.push([n.right, l + 1]);
    }
}

}


### 3、leetcode102二叉树的层序遍历（中等）


**（1）题意**


附上题目链接：[leetcode102二叉树的层序遍历](https://bbs.csdn.net/topics/618545628)


给你一个二叉树，请你返回其按 **层序遍历** 得到的节点值。 （即逐层地，从左到右访问所有节点）。


**输入输出示例：**


* **输入**: 二叉树：`[3,9,20,null,null,15,7]`

 

3

/
9 20
/
15 7

* **输出**:

[
[3],
[9,20],
[15,7]
]



**（2）解题思路**


* 层序遍历顺序就是广度优先遍历。
* 不过在遍历时候需要记录当前节点所处的层级，方便将其添加到不同的数组中。


**（3）解题步骤**


* 广度优先遍历二叉树。
* 遍历过程中，记录每个节点的层级，并将其添加到不同的数组中。


**（4）代码实现**

/**
* @param {TreeNode} root
* @return {number[][]}
*/
// 方法一
let levelOrder1 = function(root) {
if(!root){
return [];
}
const q = [[root, 0]];
const res = [];
while(q.length){
const [n, level] = q.shift();
if(!res[level]){
// 没有该层次的数组时先创建一个数组
res.push([n.val]);
}else{
// 有数组时直接将值放进
res[level].push(n.val);
}
if(n.left){
q.push([n.left, level + 1]);
}
if(n.right){
q.push([n.right, level + 1]);
}
}
return res;
};

// 方法二
let levelOrder2 = function(root){
if(!root){
return [];
}
const q = [root];
const res = [];
while(q.length){
let len = q.length;
res.push([]);
while(len–){
const n = q.shift();
res[res.length - 1].push(n.val);
if(n.left){
q.push(n.left);
}
if(n.right){
q.push(n.right);
}
}
}
return res;
}


### 4、leetcode94二叉树的中序遍历（简单）


**（1）题意**


附上题目链接：[leetcode94二叉树的中序遍历](https://bbs.csdn.net/topics/618545628)


给定一个二叉树的根节点 `root` ，返回它的 **中序** 遍历。


**输入输出示例：**


* **输入**: root = `[1,null,2,3]`
* **输出**: `[1,3,2]`


**（2）解题思路&&解题步骤**


* 这里的解题思路和步骤和上方讲中序遍历时类似，所以不再做讲解，下面直接看代码实现。


**（3）代码实现**

/**
* @param {TreeNode} root
* @return {number[]}
*/
// 遍历版本
let inorderTraversal1 = function(root) {
const res = [];
const rec = (n) => {
if(!n){
return;
}
rec(n.left);
rec(n.val);
rec(n.right);
}
rec(root);
return res;
};

// 迭代版本——栈方法
let inorderTraversal2 = function(root){
const res = [];
const stack = [];
let p = root;
while(stack.length || p){
while§{
stack.push§;
p = p.left;
}
const n = stack.pop();
res.push(n.val);
p = n.right;
}
return res;
}

inorderTraversal1(root);
inorderTraversal2(root);


### 5、leetcode112路径总和（简单）


**（1）题意**


附上题目链接：[leetcode112路径总和](https://bbs.csdn.net/topics/618545628)


给你二叉树的根节点 `root` 和一个表示目标和的整数 `targetSum` ，判断该树中是否存在 根节点到叶子节点 的路径，这条路径上所有节点值相加等于目标和 `targetSum` 。


**叶子节点** 是指没有子节点的节点。


**输入输出示例：**


* **输入**: `root` = [5,4,8,11,null,13,4,7,2,null,null,null,1], `targetSum` = 22
* **输出**: true


**（2）解题思路**


* 在深度优先遍历的过程中，记录当前路径思维节点值的和。
* 在叶子节点处，判断当前路径的节点值的和是否等于目标值。


**（3）解题步骤**


* 深度优先遍历二叉树，在叶子节点处，判断当前路径路径的节点值的和是否等于目标值，是就返回true。
* 遍历结束，如果没有匹配，就返回false。


**（4）代码实现**

/**
* @param {TreeNode} root
* @param {number} targetSum
* @return {boolean}
*/
// 递归法
let hasPathSum = function(root, targetSum) {
if(!root){
return false;
}

let res = false;

const dfs = (n, s) => {
    if(!n.left && !n.right && s === targetSum){
        res = true;
    }
    if(n.left){
        dfs(n.left, s + n.left.val);
    }
    if(n.right){
        dfs(n.right, s + n.right.val);
    }
}
dfs(root, root.val);
return res;

};


### 6、leetcode129求根节点到叶节点数字之和（中等）


**（1）题意**


附上题目链接：[leetcode129求根节点到叶节点数字之和](https://bbs.csdn.net/topics/618545628)


给你一个二叉树的根节点 `root` ，树中每个节点都存放有一个 `0` 到 `9` 之间的数字。


每条从根节点到叶节点的路径都代表一个数字：


例如，从根节点到叶节点的路径 `1 -> 2 -> 3` 表示数字 `123` 。


计算从根节点到叶节点生成的 **所有数字之和** 。


**叶节点** 是指没有子节点的节点。



![img](https://img-blog.csdnimg.cn/img_convert/149ce33e9a67ec66685ffef2c831098b.png)
![img](https://img-blog.csdnimg.cn/img_convert/cf2c399d20b0130a3644a4fae4679b3b.png)
![img](https://img-blog.csdnimg.cn/img_convert/1fac564c53f93a7cbd4c54f402013891.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

  if(n.right){
            dfs(n.right, s + n.right.val);
        }
    }
    dfs(root, root.val);
    return res;
};

6、leetcode129求根节点到叶节点数字之和（中等）

（1）题意

附上题目链接：leetcode129求根节点到叶节点数字之和

给你一个二叉树的根节点 root ，树中每个节点都存放有一个 0 到 9 之间的数字。

每条从根节点到叶节点的路径都代表一个数字：

例如，从根节点到叶节点的路径 1 -> 2 -> 3 表示数字 123 。

计算从根节点到叶节点生成的 所有数字之和 。

叶节点 是指没有子节点的节点。

[外链图片转存中…(img-3mRmGVro-1715721973299)]
[外链图片转存中…(img-3OlzOQw8-1715721973300)]
[外链图片转存中…(img-iAPm7HDp-1715721973300)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

2401_84166236
关注
  • 15
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端页面实现树形结构
qq_38729043的博客
12-05 2万+
树形结构
Javascript实现树结构
Preserve
04-23 5201
树节点属性  Node    data：节点值   parent ：指向节点的父节点  children：指向节点的孩子节点 Tree 属性与方法    _root  ：树的根节点  traverseDF(callback) ：深度遍历 traverseBF(callback)：广度遍历 树的实现 树节点定义： function Nod
一文了解树在前端中的应用，掌握数据结构中树的生命线_先序遍历在实际生活中的应用
2401_84181164的博客
05-03 677
3.建立一个倒序栈outputStack，先把根树放进，再一一放入右子树，右子树全部放完之后再放左子树。* 3.遍历完成之后，把最尽头的结点弹出，并访问它；* 3.按照栈的先进后出特点，先把右子树放进栈里，再把左子树放进栈里，一一取出。(img-XK8K0joM-1714741799110)]* 2.对于先序遍历来说，需要先把根节点取出，然后再遍历左子树了右子树；// 倒序栈输出，放根右左的顺序，之后再一一取出。// 新建一个队列，并把根节点先放到队列里面。// 先放左子树，再放右子树，方便后面取出。
前端数据结构--树
nidongla的博客
05-08 1183
前面介绍过的都是线性的数据结构，本文将介绍一种非线性数据结构——树，它对于存储需要快速查找的数据非常有用。树是一种一对多的数据结构，树这种数据结构在生活中经常看到，如 组织结构图 图中每个元素我们叫做节点，即树（Tree）可以理解为是n（n>=0)个节点的有限集合。当n=0时称为空树。 基本概念领券 www.cps3.cn 树这种数据结构跟现实生活中的树很相似，树中的元素叫节点，其中连接相邻节点之间具有层级关系的叫做父子关系。 比如下面这幅图，A 节点就是 B 节点的父节点，B 节点是 A 节..
前端框架——树形结构Ztree的使用
weixin_30920853的博客
08-29 1071
地址 官网：http://ztree.me 码云：https://gitee.com/zTree/zTree_v3 ...
一文看懂特征工程在金融风控中的应用
02-24
本文来自于csdn，本文以特征工程在金融风控中的应用为切入点，对特征工程的大致内容进行了概述。在建模领域人们常说，数据和特征决定机器学习的上限，而模型和算法只是不断地逼近这个上限。所以，特征工程在建模中起...
传感技术中的一文深度了解接近传感器的应用场景
10-15
在实际应用中，接近传感器不仅应用于工业生产，还在安全监控（如ATM机）、航空航天（如飞机起落架系统）等领域大显身手。在飞机起落架系统中，接近传感器负责检测起落架的收放状态，确保安全降落。通过磁阻型传感器...
电源技术中的TVS二极管在便携设备ESD保护中的应用
10-22
电源技术中的TVS二极管在便携设备ESD保护中的应用是电子设备设计中一个至关重要的环节。随着科技的进步，移动设备、打印机、个人计算机（PC）和数字视频光盘（DVD）等产品的功能日益增强，对主板空间的需求越来越...
dtree和jquery构建树型结构
幸福的使者
09-21 935
对于小型的树型应用来说，dtree是一个不错的选择。 先看一眼dtree给的例子 构造静态树 首先引入css文件和js文件 1 2 <link rel="StyleSheet" href="dtree.css" type="text/css" />     <script type="
前端学数据结构之树
weixin_33827731的博客
01-03 122
前面的话 　　前面介绍过一种非顺序数据结构是散列表，本文将详细介绍另一种非顺序数据结构——树，它对于存储需要快速查找的数据非常有用   数据结构 　　树是一种分层数据的抽象模型。现实生活中最常见的树的例子是家谱，或是公司的组织架构图 　　一个树结构包含一系列存在父子关系的节点。每个节点都有一个父节点（除了顶部的第一个 节点）以及零个或多个子节点 　　位于树顶部的节点叫作根节点（...
无限级目录树数据结构前端实现
qq_22555107的博客
11-14 7638
无限级目录树数据结构的前端实现
我的前端工具集(四)树状结构前篇
anyu0190的博客
10-16 589
我的前端工具集(四)树状结构前篇 liuyuhang原创，未经允许禁止转载 目录 我的前端工具集 1、什么是树状结构 　　树状结构，指的是由根，和叶组成的结构。 　　我们一般看的文件夹关系，就是树状结构。打开一个文件夹，其中可以有多个文件夹。 　　树状结构的路径能够向下扩展，同时能够向上溯源。 　　在树状结构分叉的地方，叫做节点（node）。...
前端树形结构实现之ztree的实现
热门推荐
waiting的专栏
06-25 2万+
前端页面树形结构的实现，如显示全国的省市县，企业部门的整体结构等等，本文中采用了ztree来实现树形结构，该插件是基于jquery来实现的，提供了延迟加载的功能，针对大批量的数据节点方便了用户。
前端渲染树形结构
wytraining
09-25 2222
html结构: <table cellspacing="0" cellpadding="0" border="0"> <tr v-for="item in dsList"> <td style="width:120px;"> <ch...
笔记 前端需要了解的常见数据结构--树
ygx_work的博客
05-06 244
二叉树 树拥有很多种结构，二叉树是树中最常用的结构，同时也是一个天然的递归结构。 二叉树拥有一个根节点，每个节点至多拥有两个子节点，分别为：左节点和右节点。树的最底部节点称之为叶节点，当一颗树的叶数量数量为满时，该树可以称之为满二叉树。 二分搜索树 二分搜索树也是二叉树，拥有二叉树的特性。但是区别在于二分搜索树每个节点的值都比他的左子树的值大，比右子树的值小。 实现二分搜索树 class Node...
分布式系统常见软件架构模式
最新发布
Ben的专栏
07-25 860
简而言之，有效管理数据和通信流对于构建健壮且可扩展的分布式系统至关重要。对等、API 网关、发布-订阅、请求-响应、事件溯源、ETL、批处理、流处理和编排等架构模式提供了有价值的解决方案，以应对系统设计和实现中的各种挑战。通过理解这些软件架构和分布式系统模式及其各自的优势和权衡，架构师和开发人员可以做出明智的决策，设计出满足其应用程序和用户不断变化的需求的系统。
树形策略梯度在大规模交互式推荐中的应用
在TPGR中，研究者们在项目上构建了一个平衡的层次聚类树，推荐过程被转化为从树根到某个叶子节点的路径选择。这种方式避免了深度确定性策略梯度框架中的连续动作表示与实际离散动作之间的不匹配，从而提高了效率和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值