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 = 0, j = 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