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

最新推荐文章于 2021-09-18 14:43:05 发布

yupr2011

最新推荐文章于 2021-09-18 14:43:05 发布

阅读量565

点赞数

分类专栏： js 文章标签： javascript function button 测试

本文链接：https://blog.csdn.net/yupr2011/article/details/6742415

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一共三种写法如下：

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

for (var i in arr)

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

先看下运行测试的界面：

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

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

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

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

下面是页面源代码：

 
    <html> 
 
    <body> 
 
    <script type="text/javascript"> 
 
    function  makeArr(num) { 
 
        var arr = []; 
 
        for (var  i = 0; i<num; i++){ 
 
            arr.push('abc'); 
 
        } 
 
        arr.join(''); 
 
        return arr; 
 
    } 
 
    var  num = 10000000; 
 
    function  function1() { 
 
        var arr = makeArr(num); 
 
        var start = (new Date()).valueOf(); 
 
        var count = 0; 
 
        for (var  i = 0; i < arr.length; i++) { 
 
            count++; 
 
        } 
 
        var end = (new Date()).valueOf(); 
 
        console.log('Count: '+count+' times'); 
 
        console.log('Time spent: '+(end - start)); 
 
    } 
 
    function  function2() { 
 
        var arr = makeArr(num); 
 
        var start = (new Date()).valueOf(); 
 
        var count = 0; 
 
        for (var  i in arr) { 
 
            count++; 
 
        } 
 
        var end = (new Date()).valueOf(); 
 
        console.log('Count: '+count+' times'); 
 
        console.log('Time spent: '+(end - start)); 
 
    } 
 
    function  function3() { 
 
        var arr = makeArr(num); 
 
        var start = (new Date()).valueOf(); 
 
        var count = 0; 
 
        for (var  i = 0, len = arr.length; i < len; i++) { 
 
            count++; 
 
        } 
 
        var end = (new Date()).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>