原生js vue react通用的递归函数

简介: 原生js vue react通用的递归函数

1.递归函数的由来


递归函数的由来可以追溯到数学中的递归概念和数学归纳法。

  在数学中,递归是指通过定义基本情况和递推公式,将一个问题分解为更简单的、与原问题具有相同结构的子问题,并用子问题的解来构建原问题的解。递归的思想在解决一些数学问题时非常有用。

       当计算机科学发展起来后,人们将递归思想应用到程序设计中,形成了递归函数的概念。递归函数是一种能够调用自身的函数。 递归函数的使用可以有效地解决一些需要重复执行相似任务或处理具有递归结构的问题。

递归函数的设计通常包括两部分:

基本情况(边界条件):定义问题的最简单情况和对应的解,作为递归的终止条件。

递推公式(递归关系):描述问题和子问题之间的联系,通过递归调用函数本身来解决规模较小的子问题。

        递归函数的执行过程中,每次调用都会创建一个新的函数上下文(包括参数、局部变量等),并将其压入执行栈。递归函数通过不断调用自身,并处理更小规模的子问题,直到达到基本情况为止,然后逐步返回结果,并依次弹出执行栈中的上下文,完成整个递归过程。

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


2.代码逻辑


假设下方的数据是我们从接口中获取到的

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


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

首先将拿到的数据进行处理

递归构建树: 函数 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){
                data.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) 将构建好的树状结构打印到控制台。

逻辑整体代码

    //处理好的数据
    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;
    }


效果如下: 

155ccd77a5cf4ea39393d8c285c206a8.png

本篇博客结束谢谢观看,如有更好的意见请在评论区发出来讨论。

相关文章
|
22天前
|
存储 缓存 JavaScript
如何优化React或Vue应用的性能
需要注意的是,性能优化是一个持续的过程,需要根据具体的应用场景和性能问题进行针对性的优化。同时,不同的项目和团队可能有不同的优化重点和方法,要结合实际情况灵活运用这些优化策略,以达到最佳的性能效果。
105 51
|
22天前
|
监控 JavaScript 前端开发
如何在实际应用中测试和比较React和Vue的性能?
总之,通过多种方法的综合运用,可以相对客观地比较 React 和 Vue 在实际应用中的性能表现,为项目的选择和优化提供有力的依据。
31 1
|
23天前
|
JavaScript 前端开发 开发者
React和Vue有什么区别?
React 和 Vue 都有各自的优势和特点,开发者可以根据项目的需求、团队的技术背景以及个人的喜好来选择使用。无论是 React 还是 Vue,它们都在不断发展和完善,为前端开发提供了强大的支持。
46 2
|
23天前
|
JavaScript 前端开发 测试技术
React和Vue的性能对比如何?
需要注意的是,性能不仅仅取决于框架本身,还与开发者的代码质量、架构设计以及项目的优化程度等密切相关。因此,在评估性能时,应该综合考虑多个因素,而不是仅仅局限于框架之间的比较。
95 1
|
29天前
|
JavaScript 前端开发 算法
React 框架和 Vue 框架的区别是什么?
React框架和Vue框架都是目前非常流行的前端JavaScript框架,它们在很多方面存在区别
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
33 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
25天前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
31 0
|
JavaScript 前端开发
react.js基本操练
慢慢了解其它的JS前端框架。。。 var data = [{ "when": "2 minutes ago", "who": "Jill Dupre", "description": "Created new account" }, { "when": "1 hour a...
1186 0
|
7月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
378 0
|
7月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
128 0