js中遍历数组的效率问题

最新推荐文章于 2024-03-01 21:40:14 发布

iteye_650

最新推荐文章于 2024-03-01 21:40:14 发布

阅读量857

点赞数

分类专栏： javaScript 文章标签： jQuery JavaScript XHTML CSS prototype ViewUI

本文链接：https://blog.csdn.net/iteye_650/article/details/81789060

版权

javaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jquery</title>
    <style type="text/css">
    #info {
        color:#FF0000;
        height:150px;
    }
    </style>
</head>
<body>
    <div id="div1">
    <input value="5000" type="text" id="txt1"/><input type="button" id="btn1" value="生成 checkbox"/>
    <div id="info">
    <input type="button" id="btnTest1" οnclick="fun1(this)" value="第一种"/><span></span><br/>
    <input type="button" id="btnTest1" οnclick="fun2(this)" value="第二种"/><span></span><br/>
    <input type="button" id="btnTest1" οnclick="fun3(this)" value="第三种"/><span></span><br/>
    </div>
    <div id="box"></div>
    </div>
</body>
<script type="text/javascript">
var g=function(id) {return document.getElementById(id);};
g("btn1").οnclick=function() {
    var val=g("txt1").value-0;
    if(!isNaN(val)) {
        var box=g("box");
        box.innerHTML="";
        for(var i=0;i<val;i++) {
            var chk=document.createElement("input");
            chk.type="checkbox";
            box.appendChild(chk);
        }
    }
   
}
//这里为了简单就没有判断type
var fun1=function(obj) {//第一种直接在for中取数组长度
    var chks=g("box").getElementsByTagName("input");
    var b=!chks[0].checked;

    var d=new Date();
    for(var i=0;i<chks.length;i++) {
        //chks[i].checked=b;
    }
    obj.nextSibling.innerHTML=new Date()-d;
}
var fun2=function(obj) {//第二种
    var chks=g("box").getElementsByTagName("input");
    var b=!chks[0].checked;

    var d=new Date();
    for(var i=0;chks[i];i++) {
        //chks[i].checked=b;
    }
    obj.nextSibling.innerHTML=new Date()-d;
}
var fun3=function(obj) {//第三种将数组的长度放到一个局部变量中
    var chks=g("box").getElementsByTagName("input");
    var b=!chks[0].checked;
    var length=chks.length;
    var d=new Date();
    
    for(var i=0;i<length;i++) {
        //chks[i].checked=b;
    }
    obj.nextSibling.innerHTML=new Date()-d;
}
</script>
</html>

第一种：每次循环读取 chks 集合的属性 length；
第二种：每次循环定位 chks[i]；
第三种：每次循环读取变量 length。

-----------------------------------------------

第一种：406 ms
第二种：16 ms
第三种：0 ms

--------------------------------

第三种直接读取变量速度最快，第二种集合定位次之，第一种最慢，
每种之间相差一个数量级。

----------------------------------------------------

第一种之所以慢是因为访问集合的 length 属性时需要遍历 prototype，从而获取 length，
这就增加了不必要的开销，因为 length 只是终止条件，并未参与实际运算。
----------------------------------------------------

另，如果循环中需要多次访问 chks[i] 的话，就应该进一步优化，从而降低内部检索的开销。

可以充分利用 js 的特性，不必读取 length，并将定位与赋值分离，优化代码如下 :

var fun3=function(obj) {
    var chks=g("box").getElementsByTagName("input");
    var b=!chks[0].checked;

    var d=new Date();
    for(var i=0,chk; chk=chks[i]; i++) {
        chk.checked=b;
    }
    obj.nextSibling.innerHTML=new Date()-d;
}

iteye_650

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中遍历数组的效率问题

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; &amp
复制链接

扫一扫