散分，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); } }}//这里为了简单就没有判断typevar 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]
[解决办法]
谢谢
给点分吧
感谢
[解决办法]
谢谢分享
[解决办法]
学习了，不错
[解决办法]
[解决办法]
很好 谢谢
[解决办法]
研究的好仔细啊，佩服
[解决办法]
谢谢.jf
[解决办法]
接分
[解决办法]
不错,不过我的浏览器不同。
第一种chks.length是host object，第二种chks[i]属于native object，第三种是临时变量，理应是第二种最慢，第一种次之，第三种最快吧。
代码写得很工整，吾佩服，虽然结果不一样。
[解决办法]
接分，学习
[解决办法]
非常好~顶一个~~
[解决办法]
MARK
[解决办法]
感谢楼主
[解决办法]
mark 好帖！
[解决办法]
b备用
[解决办法]
- JScript code
var a = [];for (var i = 0; i < 200000; i++) a.push(i); var start = new Date();var n = 0;var start = new Date();var n = 0;for (var i = 0; i < a.length; i++){ n += a[i]; if (n > 0x40000000) n = 0;}document.writeln((new Date() - start) + "," + n);document.writeln("<br />");var start = new Date();var n = 0;var len = a.length;for (var i = 0; i < len; i++){ n += a[i]; if (n > 0x40000000) n = 0;}document.writeln((new Date() - start) + "," + n);document.writeln("<br />");
[解决办法]
up
[解决办法]
gffdffvxvzxczxczxc
[解决办法]
恩 试试
[解决办法]
楼主费心了，学习了一招。
[解决办法]
O(∩_∩)O谢谢 楼主分享
[解决办法]
楼主写的算法不错，呵呵
[解决办法]
学习
[解决办法]
研究，研究！
[解决办法]
顶~~~
[解决办法]
关注中......
[解决办法]
３Ｑ学习了一招
[解决办法]
学习啦
------解决方案--------------------
好也
[解决办法]
9999
[解决办法]
学习了 不错的帖子 顶
[解决办法]
[解决办法]
学习并接分，不接对不起楼主
[解决办法]
UP
[解决办法]
来接分的。。。
[解决办法]
不错~
[解决办法]
学习
[解决办法]
不错..确实如此.
[解决办法]
不错
[解决办法]
接分
[解决办法]
第一种之所以慢是因为访问集合的 length 属性时需要遍历 prototype.
我最近在看Ajax in Action 想请教下各位为什么给js函数时总用到prototype,例如
function Myobject(name,size){
this.name=name;
this.size=size;
}
Myobject.prototype.tellsize=function(){
alert("size of"+ this.name+" is"+this.size);
}
var myObj = new MyObject("tiddles","7.6 meters")
myObj.tellSize();
书上说这么写是为了让js基于面对对象。可是我从在看这本书之前从来都没有这么使用过，请各位能说说都什么情况下才能用到prototype这个js属性。
[解决办法]
来观摩一下
[解决办法]
学习了 谢谢
[解决办法]
看了，是要多方法，才能步
分享
不，挺深刻
[解决办法]
ding
[解决办法]
收分
以前没测试过还真没发现其中的区别
[解决办法]
接分
[解决办法]
接分
[解决办法]
jf
[解决办法]
学习学习
[解决办法]
哪有这个样的，分析出tip告诉大家，然后还散分，
楼主RP太高啦
[解决办法]
学习一下
[解决办法]
mark
[解决办法]
都讨论得这么深啊...
那我插一句:
三种算法的效率还和集合中存放的对象有关.
虽然都是局部变量有优势.
[解决办法]
- HTML code
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=content-type Content='text/html;charset=utf-8'><style>body{ margin:0; padding:20; font-size:14px; background-color:#eee;}#container{ border:solid 1px; height:300px; width:100%; overflow:auto; background-color:white; color:darkblue;}hr{ color:#6e8; size:5px;}</style></head><body><h1><center> 'string += another_string' versus 'array push'</center></h1><hr>value : <textarea id='str' > a short string </textarea><br>times : <input type='text' id='times' value='10000' /><br><input type='button' id='btn_str' value='string add'/><input type='button' id='btn_ary' value='array push'/><input type='button' id='cls' value='clear'/><input type='text' id='tm_cost' value=0 /><br><hr><div id='container'></div><script type="text/javascript">//get a long long long string by string add another string; $('btn_str').onclick = function () { var s = $('str').value; var n = parseInt($('times').value); var o = $('container'); var result = ''; var t_1 = new Date(); for(var i = 0 ; i < n ; i++) { result += s; } $('tm_cost').value = new Date() - t_1; o.innerHTML = result; }$('cls').onclick = function () { $('container').innerHTML = ''; $('tm_cost').value = 0;}//get a long long long string by array push method;$('btn_ary').onclick = function () { var s = $('str').value; var n = parseInt($('times').value); var o = $('container'); var ary = []; var t_1 = new Date(); for(var i = 0 ; i < n ; i++) { ary.push(s); } $('tm_cost').value = new Date() - t_1; o.innerHTML = ary.join(''); }function $(id) { return document.getElementById(id);}</script></body></html>
[解决办法]
非常感谢
[解决办法]
好的很
[解决办法]
学习！！！
[解决办法]
不错，马个克
[解决办法]
谢谢楼住分享,也感谢yixianggao的讲解
[解决办法]
要好好
研究研究
[解决办法]
拿分来了
[解决办法]
[解决办法]
学习了！不错。
[解决办法]
研究真仔细！多谢了
[解决办法]
前来学习了！
[解决办法]
lai js
[解决办法]
Mark....
[解决办法]
收藏
[解决办法]
很不错，学习了！
[解决办法]
谢谢分享
[解决办法]
[解决办法]
通过这个小程序，我发现Google Chrome的运行速度比IE、火狐快多了，简直差上一个数量级啊！
[解决办法]
学习了
[解决办法]
for本来就不适合遍历大数！
[解决办法]
up..
[解决办法]
好。。。。。。。
[解决办法]
老人新学，不错不错。
[解决办法]
好，谢谢楼主，学习
[解决办法]
学习学习！
[解决办法]
高人，学习了
[解决办法]
有点意思
平时好像都是用array.length的
看来以后得考虑换种方式了.
[解决办法]
学习了
[解决办法]
up