我是FE,也是Fe

前端来源于不断的点滴积累。我一直在努力。

统计

留言簿(15)

阅读排行榜

评论排行榜

javascript中循环最佳实践

javascript中的循环或许大家都会,但是真正去研究,发现还是有一些区别。
通常的写法:
var anchors = document.getElementsByTagName("a");

for (i=0;i<anchors.length;i++){
    
// do some stuff here
}
上面的代码用jslint检查时会有很多的修改建议。

加上空格,提高可读性,jslint建议在for的操作语句中加上空格,下面是加上空格后的代码:
var anchors = document.getElementsByTagName("a");

for (i = 0; i < anchors.length; i++) {
    
//         ^                                ^       ^
}

i声明为局部变量:
var anchors = document.getElementsByTagName("a");

for (var i = 0; i < anchors.length; i++) {
    
// do some stuff here
}
jslint的解释是,变量不加上var  声明,将做为全局变量。全局变量不是好的代码。

不要使用++,--之类的操作符
在jslint上面的建议是这样的 http://www.jslint.com/lint.html#inc :
The ++ (increment) and — (decrement) operators have been known to contribute to bad code by encouraging excessive trickiness. They are second only to faulty architecture in enabling to viruses and other security menaces.

++,--视为程序的小技巧,但是并不是鼓励这样做,初学者很容易在这个上面困惑(大学教材/考试上最喜欢纠结这个了),其次就是会导致安全问题(这种情况没见过)。
基于上面的建议:代码修改为:
var anchors = document.getElementsByTagName("a");

for (var i = 0; i < anchors.length; i += 1) {
    
// do some stuff here
}

不要每次循环时计算数组的长度,i<anchors.length,会导致每次判断循环是否停止时需要计算一次anchors的长度,这样在数组比较大的时候会产生性能问题。
var anchors = document.getElementsByTagName("a");

for (var i = 0j = anchors.length; i < j; i += 1) {
    
// do some stuff here
}

上面的代码使用一个变量j缓存数组长度,提高了性能。

使用递减代替递增
上面我们已经使用一个变量缓存数组长度,但是,我们甚至可以不需要缓存数组长度,使用变量递减。
var anchors = document.getElementsByTagName("a");

for (var i = anchors.length; i > 0; i -= 1) {
    
// do some stuff here
}

上面的代码,既不需要每次循环都判断长度,也不需要单独使用一个变量缓存数组长度。

一个经常写的循环学问还不小,掌握这些小技巧,可以写出更漂亮的javascript for循环 代码。

后面还有人喜欢这么写:
var i = anchors.length;
while (i--)
{
// do some stuff here
}
这种写法也是比较精简,平时用的比较少。

相关资料:
原文链接:http://www.impressivewebs.com/javascript-for-loop/
大牛Douglas Crockford 的jslint建议:http://www.jslint.com/lint.html



posted on 2010-12-08 00:10 衡锋 阅读(1491) 评论(0)  编辑  收藏 所属分类: Web开发


只有注册用户登录后才能发表评论。


网站导航: