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

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

🙂博主:冰海恋雨.

🙂文章核心:【前端开发】JS Vue React中的通用递归函数


前言

大家好,今天和大家分享一下在前端开发中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;
    }


总结

需要注意的是,递归函数在实际应用中需要注意性能和空间占用,不当的使用可能会导致栈溢出等问题。在编写递归函数时,要确保问题可以通过有限次数的递归调用得到解决,并且考虑如何优化递归算法,避免不必要的重复计算。

以上就是本章的全部内容了,希望这篇文章能够帮助到您,感谢您的阅读。

13116c5e2904444f8ae685855cbe9567.gif

相关文章
|
2天前
|
数据可视化 前端开发 JavaScript
前端框架与库-D3.js数据可视化基础
【7月更文挑战第21天】D3.js是Web开发中创建动态、交互图表的利器,适用于从基础条形图到复杂地理热力图的广泛需求。核心概念涉及数据绑定至DOM,支持动态更新。初学者常遇难题包括不当数据绑定、选择器误用、过渡动画过量及坐标轴配置失误。避免策略需善用`.data()`, `.enter().append()`, `.exit().remove()`管理数据,熟知选择器差异,适度应用`.transition()`, 并精准设定坐标轴。示例条形图代码展示了数据绑定至`<rect>`元素的过程,奠定基础,助你进阶复杂项目。
|
6天前
|
Web App开发 存储 JavaScript
前端如何学习Node.js及Node.js的主要用途
【7月更文挑战第16天】 学习Node.js对前端开发者至关重要,涉及理解其基于V8的运行时环境、JavaScript基础、安装与验证、核心模块(如fs、http、path)及npm管理。实践项目,如用Express建服务器,参与开源,深入学习异步编程和事件循环。Node.js用于服务器开发、构建工具、本地开发服务器和实时应用,提升全栈能力。借助官方文档和各种资源加速学习。
15 4
|
9天前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
|
8天前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
|
17天前
|
前端开发 NoSQL 数据库
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
|
11天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue】 前端vue2 全局水印效果
【vue】 前端vue2 全局水印效果
9 0
|
11天前
|
JavaScript 前端开发 数据安全/隐私保护
vue 前端 邮箱、密码、手机号码等输入验证规则
vue 前端 邮箱、密码、手机号码等输入验证规则
25 0
|
11天前
|
前端开发 JavaScript
Vue前端渲染blob二进制对象图片的方法
Vue前端渲染blob二进制对象图片的方法
14 0
|
11天前
|
JavaScript 前端开发
【vue】 接口返回的preview是张图片,前端如何渲染
【vue】 接口返回的preview是张图片,前端如何渲染
11 0
|
11天前
|
前端开发 JavaScript Java
【vue】 前端 基于 vue-simple-uploader 实现大文件断点续传和分片上传
【vue】 前端 基于 vue-simple-uploader 实现大文件断点续传和分片上传
29 0