2、for循环

for循环是我们经常会遇到的情况，我们先看看下面例子：

<
input
type
=
"button"
value
=
"效率低"
onclick
=
"func1()"
/>
<
input
type
=
"button"
value
=
"效率高"
onclick
=
"func2()"
/>

var
arr = [];
for
(
var
i = 0; i < 10000; i++){
arr[i] =
"<div>"
+ i +
"</div>"
;
}
document.body.innerHTML += arr.join(
""
);
//效率低的
function
func1(){
var
divs = document.getElementsByTagName(
"div"
);
var
start =
new
Date().getTime();
for
(
var
i = 0; i < divs.length; i++){
//"效率低"
}
var
end =
new
Date().getTime();
alert(
"用时："
+ (end - start) +
"毫秒"
);
}
//效率高的
function
func2(){
var
divs = document.getElementsByTagName(
"div"
);
var
start =
new
Date().getTime();
for
(
var
i = 0, len = divs.length; i < len; i++){
//"效率高"
}
var
end =
new
Date().getTime();
alert(
"用时："
+ (end - start) +
"毫秒"
);
}

IE6.0
函数 第1次 第2次 第3次 第4次 第5次 平均
func1 1416ms 1277ms 1277ms 1370ms 1136ms 1295ms
func2 0ms 0ms 0ms 0ms 0ms 0ms
Firefox4.0
函数 第1次 第2次 第3次 第4次 第5次 平均
func1 2ms 2ms 1ms 1ms 2ms 1ms
func2 1ms 1ms 1ms 2ms 1ms 1ms
Chrome6.0
函数 第1次 第2次 第3次 第4次 第5次 平均
func1 0ms 1ms 0ms 0ms 1ms 0.4ms
func2 0ms 0ms 1ms 1ms 0ms 0.4ms

由上表可以看出，在IE6.0下，其差别是非常明显，而在Firefox和Chrome下几乎没有差别，之所以在IE6.0下会有这种情况，主要是因为for循环在执行中，第一种情况会每次都计算一下长度，而第二种情况却是在开始的时候计算长度，并把其保存到一个变量中，所以其执行效率要高点，所以在我们使用for循环的时候，特别是需要计算长度的情况，我们应该开始将其保存到一个变量中。但是并不是只要是取长度都会出现如此明显的差别，如果我们仅仅是操作一个数组，取得的是一个数组的长度，那么其实两种方式的写法都差不多，我们看下面的例子：

<
input
type
=
"button"
value
=
"效率低"
onclick
=
"func1()"
/>
<
input
type
=
"button"
value
=
"效率高"
onclick
=
"func2()"
/>

var
arr2 = [];
for
(
var
i = 0; i < 10000; i++){
arr2[i] =
"<div>"
+ i +
"</div>"
;
}
//效率低的
function
func1(){
var
start =
new
Date().getTime();
for
(
var
i = 0; i < arr2.length; i++){
//"效率低"
}
var
end =
new
Date().getTime();
alert(
"用时："
+ (end - start) +
"毫秒"
);
}
//效率高的
function
func2(){
var
start =
new
Date().getTime();
for
(
var
i = 0, len = arr2.length; i < len; i++){
//"效率高"
}
var
end =
new
Date().getTime();
alert(
"用时："
+ (end - start) +
"毫秒"
);
}

我们再来看看其在IE6.0下执行情况

IE6.0
函数 第1次 第2次 第3次 第4次 第5次 平均
func1 0ms 0ms 0ms 0ms 0ms 0ms
func2 0ms 0ms 0ms 0ms 0ms 0ms

从上表可以看出，如果仅仅是一个数组的话，我们看到其实两种写法都是差不多的，其实如果我们把循环再上调到100000次的话，也仅仅是差别几毫秒而已，所以在数组的情况下，我认为都是一样的。对于for循环的优化，也有人提出很多点，有人认为用-=1，或者从大到小的方式循环等等，我认为是完全没有必要的，这些优化往往实际情况下根本没有表现出来，换句话说只是计算机级别的微小的变化，但是给我们带来的却是代码的可读性大大的降低，所以实在是得不偿失。