【前端开发】JS Vue React中的通用递归函数

在这里插入图片描述

文章目录

  • 前言
  • 一、递归函数的由来
  • 二、功能实现
    • 1.后台数据
    • 2.处理数据
    • 3.整体代码
  • 总结


前言

大家好,今天和大家分享一下在前端开发中js,vue,react的通用递归方法。
递归是指一个函数在执行过程中调用自身的行为。通过递归,可以将一个复杂的问题拆解成多个子问题,并通过解决子问题来解决原始问题。递归在编程中非常常见,特别是在解决树型结构或者需要进行重复操作的情况下。

一、递归函数的由来

递归函数的由来可以追溯到数学中的递归概念和数学归纳法。
在数学中,递归是指通过定义基本情况和递推公式,将一个问题分解为更简单的、与原问题具有相同结构的子问题,并用子问题的解来构建原问题的解。递归的思想在解决一些数学问题时非常有用。
当计算机科学发展起来后,人们将递归思想应用到程序设计中,形成了递归函数的概念。递归函数是一种能够调用自身的函数。 递归函数的使用可以有效地解决一些需要重复执行相似任务或处理具有递归结构的问题。

递归函数的设计通常包括两部分:
基本情况(边界条件):定义问题的最简单情况和对应的解,作为递归的终止条件。
递推公式(递归关系):描述问题和子问题之间的联系,通过递归调用函数本身来解决规模较小的子问题。
递归函数的执行过程中,每次调用都会创建一个新的函数上下文(包括参数、局部变量等),并将其压入执行栈。递归函数通过不断调用自身,并处理更小规模的子问题,直到达到基本情况为止,然后逐步返回结果,并依次弹出执行栈中的上下文,完成整个递归过程。

递归函数在实际编程中有广泛的应用,例如树的遍历、图的搜索、排列组合、动态规划等领域。但需要注意的是,递归函数的设计要合理,避免无限递归或重复计算,以确保程序的正确性和效率。

二、功能实现

1.后台数据

下面的数据是一个假数据,相当于接口数据,大家写的时候接口有数据就直接获取就好。

数据结构: 每个元素都具有 id、pid、title 和 money 属性,其中 id 是每个元素的唯一标识,pid 是父级元素的 id,title 是该元素的标题,money 是一些金额。

var temp = [{"id": 1,"pid": 0,"title": "一档","money": "666.00"
},
{"id": 2,"pid": 0,"title": "二档","money": "1900.00"
},
{"id": 9,"pid": 1,"title": "一档1级","money": "1800.00"
},
{"id": 3,"pid": 0,"title": "三档","money": "2000.00"
},
{"id": 4,"pid": 0,"title": "四档","money": "2200.00"
},
{"id": 6,"pid": 4,"title": "四档1级","money": "2200.00"
},
{"id": 7,"pid": 2,"title": "二档1级","money": "3700.00"
},
{"id": 8,"pid": 3,"title": "三档1级","money": "2000.00"
}
]

2.处理数据

递归构建树: 函数 getTree(list, pid, data) 被调用时,它的目标是在 data 数组中构建一个树状结构。参数 list 是原始数据数组,pid 是当前节点的父级 ID,data 是用来存储构建的树状结构的数组。

//处理好的数据
let res = getTree(temp,0,[]);
console.log(res);	//控制台打印

先获取到所有的数据
获取一级节点: 使用 for…of 循环遍历原始数据 list,查找所有父级 ID 等于当前 pid 的元素,然后将这些元素添加到 data 数组中,这些元素就成为了一级节点。
获取子级节点: 对于每个一级节点,使用 for…of 循环遍历 data,为每个一级节点添加一个空数组 children,然后再次调用 getTree 函数,将当前一级节点的 id 作为新的 pid,并传入该一级节点的 children 数组。

//处理数据方法
function getTree(list,pid,data){//获取所有一级for(let item of list){if(item.pid == pid){ata.push(item);}}return data;
}

获取二级及三级数据
删除空的 children 属性: 在每个一级节点的循环中,如果它没有子级节点(即 children 数组为空),则删除该属性,以使最终结果更清晰。

//获取子级for(let i of data){i.children = [];getTree(list,i.id,i.children);//递归调用if(i.children.length == 0){delete i.children;}}

返回树状数据结构: 函数返回构建好的树状结构,即 data 数组,其中每个元素都带有 children 属性,表示它的子级节点。
日志输出: 最后,你使用 console.log(res) 将构建好的树状结构打印到控制台。

3.整体代码

//处理好的数据let res = getTree(temp,0,[]);console.log(res);//打印观察//处理数据方法function getTree(list,pid,data){//获取所有一级for(let item of list){if(item.pid == pid){data.push(item);}}//获取子级for(let i of data){i.children = [];getTree(list,i.id,i.children);//递归调用if(i.children.length == 0){delete i.children;}}return data;}

总结

需要注意的是,递归函数在实际应用中需要注意性能和空间占用,不当的使用可能会导致栈溢出等问题。在编写递归函数时,要确保问题可以通过有限次数的递归调用得到解决,并且考虑如何优化递归算法,避免不必要的重复计算。
以上就是本章的全部内容了,希望这篇文章能够帮助到您,感谢您的阅读。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/130412.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Pytorch框架详解

文章目录 引言1. 安装与配置1.1 如何安装PyTorch1.2 验证安装 2. 基础概念2.1 张量(Tensors)2.1.1 张量的基本特性2.1.2 创建张量2.1.3 张量操作 2.2 自动微分(Autograd)2.2.1 基本使用2.2.2 计算梯度2.2.3 停止追踪历史2.2.4 自定…

Apache Tomcat 漏洞复现

文章目录 Apache Tomcat 漏洞复现1. Tomcat7 弱密码和后端 Getshell 漏洞1.1 漏洞描述1.2 漏洞复现1.3 漏洞利用1.3.1 jsp小马1.3.2 jsp大马 1.4 安全加固 2. Aapache Tomcat AJP任意文件读取/包含漏洞2.1 漏洞描述2.1 漏洞复现2.2 漏洞利用工具2.4 修复建议 3. 通过 PUT 方法的…

马上金九银十了,给大家一点面试方面的建议

好久不见,甚是想念。这段时间没有更新什么文章,其实是因为我跳了一波槽,出去面了一圈后,也顺利拿了不少架构岗位的offer。 正好马上要金九银十了,相信有不少小伙伴们估计也有跳槽涨薪的想法,那么就从我最近…

SpringMVC实现增删改查

文章目录 一、配置文件1.1 导入相关pom依赖1.2 jdbc.properties:配置文件1.3 generatorConfig.xml:代码生成器1.4 spring-mybatis.xml :spring与mybatis整合的配置文件1.5 spring-context.xml :上下文配置文件1.6 spring-mvc-xml:…

解决Microsoft Edge无法正常运行的有效方案分享!

Microsoft Edge打不开或不能加载网页是用户在Windows 10、Android、Mac和iOS设备上的网络浏览器上遇到的许多错误之一。其他Microsoft Edge问题可能包括浏览器窗口和选项卡冻结、网站崩溃、互联网连接错误消息以及丢失Microsoft Edge书签、收藏夹、密码和收藏。 Microsoft Edg…

Fiddler抓包工具(详细讲解)

序章 Fiddler是一个蛮好用的抓包工具,可以将网络传输发送与接受的数据包进行截获、重发、编辑、转存等操作。也可以用来检测网络安全。反正好处多多,举之不尽呀!当年学习的时候也蛮费劲,一些蛮实用隐藏的小功能用了之后就忘记了&…

关于前端就业前景的一点看法

一、前言 最近,很多人在知乎上鼓吹前端未来会没掉的概念。在此我想说这个说法并不真实,而是一种极端的观点。 事实上,前端开发在当今的互联网行业中扮演着至关重要的角色,它是构建 Web 应用程序所必需的一部分,能够实现…

【STM32】常用存储器

常用存储器 RAM 存储器 RAM 是“Random Access Memory”的缩写,被译为随机存储器。所谓“随机存取”,指的是当存储器中的消息被读取或写入时,所需要的时间与这段信息所在的位置无关。而RAM可随读取其内部任意地址的数据,时间都是…

React 消息文本循环展示

需求 页面上有个小喇叭,循环展示消息内容 逻辑思路 设置定时器,修改translateX属性来实现滚动,判断滚动位置,修改list位置来实现无限滚动 实现效果 代码 /** Author: Do not edit* Date: 2023-09-07 11:11:45* LastEditors: …

chrome 谷歌浏览器 导出插件拓展和导入插件拓展

给同事部署 微软 RPA时,需要用到对应的chrome浏览器插件;谷歌浏览器没有外网是不能直接下载拓展弄了半小时后才弄好,竟发现没有现成的教程,遂补充; 如何打包导出 谷歌浏览器 地址栏敲 chrome://extensions/在对应的地…

使用Pyarmor保护Python脚本不被反向工程

Python可读性强,使用广泛。虽然这种可读性有利于协作,但也增加了未授权访问和滥用的风险。如果未采取适当的保护,竞争对手或恶意攻击者可以复制您的算法和专有逻辑,这将对您软件的完整性和用户的信任产生负面影响。 实施可靠的安…

负载均衡-ribbon源码解析

负载均衡-ribbon源码解析 1 LoadBalanced注解 /*** 基于ribbon调用服务及负载均衡* return*/ LoadBalanced Bean public RestTemplate restTemplate(){return new RestTemplate(); }Bean ConditionalOnMissingBean public RestTemplateCustomizer restTemplateCustomizer(fin…

【Java】传输层协议TCP

传输层协议TCP TCP报文格式首部长度保留位32位序列号和32位确认应答号标记ACKSYNFINRSTURGPSH 16位窗口大小16位校验和16位紧急指针选项 TCP特点可靠传输实现机制-确认应答超时重传连接管理机制三次握手四次挥手特殊情况 滑动窗口流量控制拥塞控制延迟应答捎带应答面向字节流粘…

RuoYi若依管理系统最新版 基于SpringBoot的权限管理系统

RuoYi是一个后台管理系统,基于经典技术组合(Spring Boot、Apache Shiro、MyBatis、Thymeleaf)主要目的让开发者注重专注业务,降低技术难度,从而节省人力成本,缩短项目周期,提高软件安全质量。 本…

数据结构:线性表(栈的实现)

文章目录 1. 栈(Stack)1.1 栈的概念1.2 栈的结构链表栈数组栈 2. 栈的定义3. 栈的实现3.1 初始化栈 (StackInit)3.2 入栈 (StackPush)3.3 出栈 (StackPop)3.4 检测栈是否为空 (StackEmpty)3.5 获取栈顶元素 (StackTop)3.6 获取栈中有效元素个数 (StackSize)3.7 销毁栈 (StackDe…

蓝桥杯官网练习题(纸牌三角形)

题目描述 本题为填空题,只需要算出结果后,在代码中使用输出语句将所填结果输出即可。 A,2,3,4,5,6,7,8,9 共 99 张纸牌排成一个正三角形(A 按 1 计算)。要求每个边的和相等。 下图就是一种排法。 这样的排法可能会有很多。 如果…

Docker-安装(Linux,Windows)

目录 前言安装版本Docker版本说明前提条件Linux安装使用YUM源部署获取阿里云开源镜像站YUM源文件安装Docker-ce配置Docker Daemon启动文件启动Docker服务并查看已安装版本 使用二进制文件部署 Windows安装实现原理安装步骤基本使用 参考说明 前言 本文主要说明Docker及其相关组…

Mac brew -v 报错 fatal: detected dubious ownership in repository

Mac 电脑查询 brew版本时报错,如下错误: Last login: Fri Sep 8 14:56:21 on ttys021 sunshiyusunshiyudeMacBook-Pro-2 ~ % brew -v Homebrew 4.0.3-30-g7ac31f7 fatal: detected dubious ownership in repository at /usr/local/Homebrew/Library/Ta…

C++面向对象

C面向对象知识 内存字节对齐 #pragma pack(n) 表示的是设置n字节对齐,windows默认是8字节,linux是4字节,鲲鹏是4字节 struct A{char a;int b;short c; };char占一个字节,起始偏移为零,int占四个字节,min(8,4)4&#x…

计算机毕设之基于Hadoop+springboot的物品租赁系统的设计与实现(前后端分离,内含源码+文档+教程)

该系统基于Hadoop平台,利用Java语言、MySQL数据库,结合目前流行的 B/S架构,将物品租赁管理的各个方面都集中到数据库中,以便于用户的需要。在确保系统稳定的前提下,能够实现多功能模块的设计和应用。该系统由管理员功能…