JavaScript的递归之递归与循环示例介绍


Posted in Javascript onAugust 05, 2013

递归与循环

对于不同类型的需要重复计算的问题,循环和递归两种方法各有所长,能给出更直观简单的方案。另一方面,循环和递归的方法可以互相转换。任何一个循环的代码都可以用递归改写,实现相同的功能;反之亦然。在不失去其普遍性的前提下,可以把循环和递归分别用下列伪代码概括。

伪代码格式说明:循环采用while形式;变量不加定义;赋值用:=;条件表达式和执行的语句都写成函数的形式,圆括号内写上相关的值。其他语法方面,尽量接近Javascript的规范。

//pseudo code of a loop 
//while形式 
function loop(arguments){ 
//结果的初始值 
result:=initial_value; while(condition(variable, arguments)){//循环条件,可能只需arguments,也可能为了方便引入循环变量 
//计算结果。参数包括之前的结果、当前循环变量和外部变量 
result:=calculate(result, variable, extern_variables); 
//影响函数的外部环境,即修改外部变量 
changeStatus(result, variable, extern_variables); 
//执行完循环体中的语句后,修改参数或循环变量。 
modify_arguments_variable(arguments, variable); 
} 
//返回结果 
return result; 
}

同样我们给出递归函数的伪代码。
//pseudo code of a recursion 
function recursion(arguments){ 
//以下代码为控制函数重复调用的结构部分。 
//获得再次调用此函数的新的参数,可能为多组arguments值。 
//对应于循环中的condition(variable, arguments)和modify_arguments_variable(arguments, variable)。 
new_arguments:=conditional_get_next(arguments); 
//对新参数的每一组,调用函数自身。 
results:=recursion(new_arguments); //以下的代码为每次调用都运行的功能部分 
//计算结果。涉及到之前的结果、当前循环变量和外部变量。 
//对应于循环中的result:=calculate(result, variable, extern_variables)。 
result:=calculate(arguments, extern_variables); 
result:=combine(result, results); 
//影响函数的外部环境,即修改外部变量 
changeStatus(result, arguments, extern_variables); 
return result; 
}

籍比较两段代码,可以看出循环和递归具有相似的构成,通过改变顺序和适当的变换,任何循环都可以用递归的方式实现。程序简单时,这种转换很容易看出。比如下面这个简单的累计求和函数:
//loop 
function sum(num){ 
var result=1; 
while (num>1){ 
result+=num; 
num--; 
} 
return result; 
}

对应的递归形式:
//recursion 
function sum2(num){ 
if (num>1){ 
return num+sum(num-1); 
}else{ 
return 1; 
} 
}

反之,大部分递归程序也可以直接由循环来实现。下面是求最大公约数的循环形式的函数。
function gcd2(a, b){ 
var temp; 
if (a<b){ 
temp=a; 
a=b; 
b=temp; 
} 
var c=a%b; 
while (c!==0){ 
a=b; 
b=c; 
c=a%b; 
} 
return b; 
}

不过,从递归到循环的转换并不是都这么容易。递归伪代码中的产生再次调用此函数的新参数部分

new_arguments:=conditional_get_next(arguments);

较之循环的对应部分更为灵活。可以按照新产生的参数组数(函数需要的所有参数为一组)将递归分为两类。第一类为参数组数固定,该递归可以转换为循环,比如斐波那契数列和最大公约数的例子;第二类为参数组数不确定——就像在遍历一个图或树的时候那样,每个点有任意个相邻的点——该递归不能直接转换为循环。

因为循环只能做一维的重复,而递归可以遍历二维的结构。比如一棵树中,一个节点既有它的子节点,也有同级的节点,简单的一维循环不能够在两个方向上遍历。

但是如果我们在循环中借助某种数据结构记住有关节点位置的一些信息,第二类递归也可以用循环实现。

我们再通过一个例子来实践上面观察得出的结论。HTML5为Document和Element新定义了一个方法getElementsByClassName(names),返回具有给定class值的所有elements。包括Firefox3在内的一些浏览器已经支持该方法。下面我们先用递归的方法给出一个功能较弱的版本,然后再用循环的方法重写它。

var getElementsByClass={}; //elem为一个HTMLElement 
//name为单个class名 
//返回包含elem下所有class属性包含给定名称的element的数组 
getElementsByClass.recursion1=function (elem, name){ 
var list=[]; 
function getElements(el){ 
if (el.className.split(' ').indexOf(name)>-1){ 
list.push(el); 
} 
for (var i=0, c=el.children; i<c.length; i++){ 
getElements(c[i]); 
} 
} 
getElements(elem); 
return list; 
}

如前所述,在循环中为了记住节点的位置信息,我们需要一个能实现以下方法的数据结构。

push(object) //写入一个对象。

objectpop() //读出最近写入的一个对象,并将其从数据结构中删除。

objectget() //读出最近写入的一个对象,不改变数据结构的内容。

堆栈正是这样一个后进先出的数据结构。Javascript中的Array对象支持前两种方法,我们在为其增加第三个方法即可。

采用循环的版本:

getElementsByClass.loop1 = function(elem, name){ 
//use a js array as the basis of a needed stack 
var stack = []; 
stack.get = function(){ 
return stack[stack.length - 1]; 
} var list = []; 
//the business logic part. put the eligible element to the list. 
function testElem(el){ 
if (el.className.split(' ').indexOf(name) > -1) { 
list.push(el); 
} 
} 
//check the root element 
testElem(elem); 
//initialize the stack 
stack.push({ 
pointer: elem, 
num: 0 
}); 
var parent, num, el; 
while (true) { 
parent = stack.get(); 
el = parent.pointer.children[parent.num]; 
if (el) {//enter a deeper layer of the tree 
testElem(el); 
stack.push({ 
pointer: el, 
num: 0 
}); 
} 
else {//return to the upper layer 
if (stack.pop().pointer === elem) { 
break; 
} 
else { 
stack.get().num += 1; 
} 
} 
} 
return list; 
}

归纳起来。所有循环都可以用递归实现;所有递归都可以用循环实现。采用哪种方法,由具体问题下哪种思路更方便直观和使用者的喜好决定。

效率

性能方面,递归不比循环有优势。除了多次函数调用的开销,在某些情况下,递归还会带来不必要的重复计算。以计算斐波那契数列的递归程序为例。求第n项A(n)时,从第n-2项起,每一项都被重复计算。项数越小,重复的次数越多。令B(i)为第i项被计算的次数,则有

B(i)=1; i=n, n-1

B(i)=B(i+1)+B(i+2); i<n-1

这样,B(i)形成了一个有趣的逆的斐波那契数列。求A(n)时有:

B(i)=A(n+1-i)

换一个角度来看,令C(i)为求A(i)时需要的加法的次数,则有

C(i)=0; i=0, 1

C(i)=1+C(i-1)+C(i-1); i>1

令D(i)=C(i)+1,有

D(i)=1; i=0, 1

D(i)=D(i-1)+D(i-1)

所以D(i)又形成一个斐波那契数列。并可因此得出:

C(n)=A(n+1)-1

而A(n)是以几何级数增长,这种多余的重复在n较大时会变得十分惊人。与之相对应的采用循环的程序,有

B(n)=1; n为任意值

C(n)=0; n=0, 1

C(n)=n-1; n>1

因而当n较大时,前面给出的采用循环的程序会比采用递归的程序快很多。

如上一节中的循环一样,递归中的这个缺陷也是可以弥补的。我们只需要记住已经计算出来的项,求较高项时,就可以直接读取以前的项。这种技术在递归中很普遍,被称为“存储”(memorization)。

下面是采用存储技术的求斐波那契数列的递归算法。

//recursion with memorization 
function fibonacci4(n){ 
var memory = []; //used to store each calculated item 
function calc(n){ 
var result, p, q; 
if (n < 2) { 
memory[n] = n; 
return n; 
} 
else { 
p = memory[n - 1] ? memory[n - 1] : calc(n - 1); 
q = memory[n - 2] ? memory[n - 2] : calc(n - 2); 
result = p + q; 
memory[n] = result; 
return result; 
} 
} 
return calc(n); 
}
Javascript 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
php与js的区别是什么
Aug 05 #Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 #Javascript
js获取input标签的输入值实现代码
Aug 05 #Javascript
js实现页面转发功能示例代码
Aug 05 #Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 #Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 #Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 #Javascript
You might like
php下获取客户端ip地址的函数
2010/03/15 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
Joules美国官网:出色的英国风格
2017/10/30 全球购物
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
远程研修随笔感言
2014/02/10 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
经典毕业生求职信
2014/07/12 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
研究生导师评语
2014/12/31 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle