一文深入详解js中的递归

 更新时间:2025年12月19日 09:48:24   作者:小明记账簿  
递归函数是一种在函数体内部直接或间接调用自身的函数,在JavaScript中递归函数可以用来解决可以分解为相似子问题的问题,这篇文章主要介绍了js中递归的相关资料,需要的朋友可以参考下

1. 什么是递归

在 JavaScript 中,递归是指一个函数在其定义中直接或间接地调用自身的编程技巧。递归函数通常包含两个部分:

  • 基本情况(Base Case):也称为终止条件,是递归函数停止调用自身的条件。如果没有基本情况,递归函数将无限循环调用,最终导致栈溢出错误。
  • 递归情况(Recursive Case):函数调用自身的部分,通过不断地缩小问题的规模,逐步接近基本情况。

2. 递归的优缺点

优点

  • 代码简洁:递归可以用较少的代码解决一些复杂的问题,尤其是那些具有递归结构的问题,如树的遍历、阶乘计算等。
  • 逻辑清晰:递归能够更自然地表达问题的本质,使代码的逻辑更加清晰易懂。

缺点

  • 性能问题:递归调用会消耗大量的栈空间,因为每次调用函数都会在调用栈中创建一个新的栈帧。如果递归深度过大,可能会导致栈溢出错误。
  • 效率较低:递归调用会有额外的函数调用开销,包括参数传递、栈帧的创建和销毁等,因此在性能上可能不如迭代方法。

3. 如何实现递归

实现递归函数需要遵循以下步骤:

  • 定义基本情况,确保递归能够终止。
  • 定义递归情况,通过调用自身来解决规模更小的子问题。

以下是一个计算阶乘的递归函数示例:

function factorial(n) {
    // 基本情况:当 n 为 0 或 1 时,阶乘为 1
    if (n === 0 || n === 1) {
        return 1;
    }
    // 递归情况:n 的阶乘等于 n 乘以 (n-1) 的阶乘
    return n * factorial(n - 1);
}

// 调用递归函数
const result = factorial(5);
console.log(result); // 输出 120

4. 什么情况下使用递归

递归适用于以下情况:

  • 问题具有递归结构:如树、图等数据结构的遍历,递归能够更自然地处理这些结构。
  • 问题可以分解为规模更小的子问题:通过不断地将问题分解为更小的子问题,最终达到基本情况。

5. 更多递归示例

斐波那契数列

斐波那契数列是指这样一个数列:0、1、1、2、3、5、8、13、21、34、…… ,在数学上,斐波那契数列以如下递推的方法定义:F(0)=0F(0)=0F(0)=0F(1)=1F(1)=1F(1)=1, F(n)=F(n−1)+F(n−2)F(n)=F(n - 1)+F(n - 2)F(n)=F(n1)+F(n2)n≥2n ≥ 2n2n∈N∗n ∈ N*nN)。

function fibonacci(n) {
    // 基本情况:当 n 为 0 或 1 时,直接返回 n
    if (n === 0 || n === 1) {
        return n;
    }
    // 递归情况:第 n 个斐波那契数等于第 (n-1) 个和第 (n-2) 个斐波那契数之和
    return fibonacci(n - 1) + fibonacci(n - 2);
}

// 调用递归函数
const fibResult = fibonacci(6);
console.log(fibResult); // 输出 8

遍历 DOM 树

递归可以用于遍历 DOM 树,访问每个节点。

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="parent">
        <div>Child 1</div>
        <div>Child 2</div>
    </div>
    <script>
        function traverseDOM(node) {
            // 处理当前节点
            console.log(node.nodeName);
            // 递归遍历子节点,这里的子节点必须是两个及两个以上
            for (let i = 0; i < node.childNodes.length; i++) {
                const child = node.childNodes[i];
                if (child.nodeType === 1) { // 只处理元素节点
                    traverseDOM(child);
                }
            }
        }

        // 获取根节点
        const root = document.getElementById('parent');
        // 调用递归函数
        traverseDOM(root);
    </script>
</body>

</html>

在上述示例中,traverseDOM 函数递归地遍历 DOM 树,访问每个元素节点并打印其节点名称。

总结

到此这篇关于js中递归的文章就介绍到这了,更多相关js中递归内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 深入理解ES6的迭代器与生成器

    深入理解ES6的迭代器与生成器

    本篇文章主要介绍了深入理解ES6的迭代器与生成器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Javascript实现图片懒加载插件的方法

    Javascript实现图片懒加载插件的方法

    最近由于公司项目需要,要利用Javascript实现图片懒加载效果,尝试起来发现并不难,于是将自己的实现过程分享出来给大家学习和参考,希望对有需要的朋友们带来一定的帮助,感兴趣的朋友们下面来一起看看吧。
    2016-10-10
  • JavaScript实现节假日日历应用开发全过程

    JavaScript实现节假日日历应用开发全过程

    在Web开发中,日历控件是一个常见的组件,用于显示日期并帮助用户选择日期,这篇文章主要介绍了JavaScript实现节假日日历应用开发的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-10-10
  • xml分页+ajax请求数据源+dom取结果实例代码

    xml分页+ajax请求数据源+dom取结果实例代码

    最近做的一个项目里的某个小功能,主要是为了方便选择数据 演示地址:由于有恶意程序,所以去掉地址
    2008-10-10
  • JS控制弹出新页面窗口位置和大小的方法

    JS控制弹出新页面窗口位置和大小的方法

    这篇文章主要介绍了JS控制弹出新页面窗口位置和大小的方法,实例分析了open方法弹出窗口的使用技巧,需要的朋友可以参考下
    2015-03-03
  • JavaScript实现星级评价效果

    JavaScript实现星级评价效果

    这篇文章主要为大家详细介绍了JavaScript实现星级评价效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • js脚本获取webform服务器控件的方法

    js脚本获取webform服务器控件的方法

    asp.net webform中获取服务器控件,js脚本获取服务器控件需要使用ClientID,下面有个示例,大家可以参考下
    2014-05-05
  • Javascript中使用A标签获取当前目录的绝对路径方法

    Javascript中使用A标签获取当前目录的绝对路径方法

    这篇文章主要介绍了Javascript中使用A标签获取当前目录的绝对路径方法,本文讲解的方法比较特别,需要的朋友可以参考下
    2015-03-03
  • JavaScript实现音乐导航效果

    JavaScript实现音乐导航效果

    这篇文章主要为大家详细介绍了JavaScript实现音乐导航效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • ClearTimeout消除闪动实例代码

    ClearTimeout消除闪动实例代码

    本文给大家介绍ClearTimeout消除闪动相关知识,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-02-02

最新评论