浅谈javascript递归（白话版）

最新推荐文章于 2024-03-20 17:38:31 发布

转载最新推荐文章于 2024-03-20 17:38:31 发布 · 164 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cb02d15f265da03b8583fd3

文章标签：

#javascript #ViewUI

本文深入解析递归函数的概念，探讨其工作原理与边界条件的重要性，通过实例演示如何避免无限递归，确保函数正确终止。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

递归

递归是一种解决问题的方法，通常我们可以理解成函数调用自身；

什么递归？递归怎么写？

首先直接调用自身的方法和函数，他是一个递归，我们看代码：
复制代码

var recursiveFun = function(params){
    recursiveFun(params);
}
// or
var recursiveFun1 = function(params){
    recursiveFun2(params);
}
var recursiveFun2 = function(params){
    recursiveFun1(params);
}
复制代码

假设现在我们要执行recursiveFun() or recursiveFun1(); 从上面函数，我们能知道他会一直重复调用；因此，每个递归函数都需要有边界条件，我们通俗一点，可以叫它停止点，作用是为了防止无限递归。

如果防止递归停止，无限递归带来的问题

我们先思考一个问题，如果忘记加上停止递归函数的边界条件，会发生什么呢？会一直执行函数吗？

答案是不会，递归并不会无限的执行下去，浏览器会抛出错误，也就是所谓的栈溢出错误；我们可以通过以下代码来测试：

var i = 0;
var recursiveFun = function(){
    i++;
    recursiveFun();
}
try {
    recursiveFun();
} catch (err) {
    console.log(`i=${i}error:${err}`) 
}
复制代码

以上是运行结果，从图中我们能看出在执行15661次后浏览器给我们抛出了错误：RangeError: Maximum call stack size exceeded；超过最大调用栈大小；我们如何停止递归呢；我们只需要加一个条件即可；假设我们条件是当i累加到100的时候停止。代码如下：

var i = 0;
var recursiveFun = function(){
    if (i > 100) return;
    i++;
    recursiveFun();
}
try {
    recursiveFun();
} catch (err) {
    console.log(`i=${i}error:${err}`) 
}
复制代码