Javascript中for循环的三种写法的效率对比

来源：互联网发布：monkey软件编辑：程序博客网时间：2024/06/11 19:57

一共三种写法如下：

view sourceprint?
for (var i = 0; i < arr.length; i++)

view sourceprint?
for (var i in arr)

view sourceprint?
for (var i = 0, len = arr.length; i < len; i++)

先看下运行测试的界面：

再看下对应的三个结果，三种写法执行的效率是有很大不同的：

如此看来，执行效率最快的是第三种：

view sourceprint?
for (var i = 0, len = arr.length; i < len; i++)

先声明变量，再进行循环判断，效率远比遍历数组高得多，也比循环取得数组长度的效率快得多！

下面是页面源代码：

view sourceprint?
<html> 
<body> 
<script type="text/javascript">
function makeArr(num) { 
    vararr = []; 
    for(var i = 0; i<num; i++){ 
        arr.push('abc');
    }
    arr.join('');
    returnarr; 
} 
var num = 10000000; 
function function1() { 
    vararr = makeArr(num); 
    varstart = (newDate()).valueOf(); 
    varcount = 0; 
    for(var i = 0; i < arr.length; i++) { 
        count++;
    }
    varend = (newDate()).valueOf(); 
    console.log('Count: '+count+' times');
    console.log('Time spent: '+(end - start));
} 
function function2() { 
    vararr = makeArr(num); 
    varstart = (newDate()).valueOf(); 
    varcount = 0; 
    for(var i in arr) {
        count++;
    }
    varend = (newDate()).valueOf(); 
    console.log('Count: '+count+' times');
    console.log('Time spent: '+(end - start));
} 
function function3() { 
    vararr = makeArr(num); 
    varstart = (newDate()).valueOf(); 
    varcount = 0; 
    for(var i = 0, len = arr.length; i < len; i++) { 
        count++;
    }
    varend = (newDate()).valueOf(); 
    console.log('Count: '+count+' times');
    console.log('Time spent: '+(end - start));
} 
</script> 
for (var i = 0; i < arr.length; i++) <br />
<button onClick="function1();">loop 1</button><br />
<p id="f1"></p>
for (var i in arr)<br /> 
<button onClick="function2();">loop 2</button><br />
<p id="f2"></p>
for (var i = 0, len = arr.length; i < len; i++)<br />
<button onClick="function3();">loop 3</button><br />
<p id="f3"></p>
</body> 
</html>