散分，js中三种遍历数组的效率,该如何解决

散分，js中三种遍历数组的效率

HTML code


<!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" onclick="fun1(this)" value="第一种"/><span></span><br/>
    <input type="button" id="btnTest1" onclick="fun2(this)" value="第二种"/><span></span><br/>
    <input type="button" id="btnTest1" onclick="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").onclick=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>

结果：
在5000个chk时,多次测试结果：
第一种方式500毫秒左右
第二种方式大多数是63，少数是46（跟第三种一样）
第三种几乎每次都是46，47的样子
ps:假设checkbox选中和取消的速度是一样，实际上也差不多

------解决方案--------------------
第一种效率比后两者低是比较肯定的，因为每次都需要访问当前的数组对象，再可以找到length。
第二种看起来比第三种高，大概说明访问数组的长度的开销要比访问越界元素的开销要小吧。

楼主费心了，学习了一招。
------解决方案--------------------
研究，研究！
------解决方案--------------------
学习了
------解决方案--------------------
这个贴好
------解决方案--------------------
JF~
------解决方案--------------------
Mark
------解决方案--------------------
接分了~~~~
------解决方案--------------------
[b][/b][i][/i][u][/u][code=Assembly][/code]
------解决方案--------------------
谢谢
给点分吧

散分，js中三种遍历数组的效率,该如何解决

相关推荐