我从书中学到,你应该这样写for循环:
for(var i=0, len=arr.length; i < len; i++){
// blah blah
}
所以arr。每次不计算长度。
其他人说编译器会做一些优化,所以你可以这样写:
for(var i=0; i < arr.length; i++){
// blah blah
}
我只是想知道在实践中哪种方法是最好的?
我从书中学到,你应该这样写for循环:
for(var i=0, len=arr.length; i < len; i++){
// blah blah
}
所以arr。每次不计算长度。
其他人说编译器会做一些优化,所以你可以这样写:
for(var i=0; i < arr.length; i++){
// blah blah
}
我只是想知道在实践中哪种方法是最好的?
当前回答
虽然这是一个非常古老的问题,但也是一个非常有趣的问题,
请原谅我稍微改变一下这个问题,但我会在最后回答这个问题。
这个问题让我问自己,在js中是否有更好的循环方法:
所以我做了一些测试,以下是我的发现:
对于1000_000记录:最好是forEach。
对于100条记录:这根本不重要。
回到你刚才的问题:
我创建的例子和问题不完全一样。但我发现了一些有趣的事情:
首先,就像你说的,arr。如果它在比较语句I < arr内,Length每次都会计算。长度……
注意:下面的arrLength变量不超过1000_000条记录的数量。
例如:这不会工作
但是这个会
这需要0.036秒。与数字不变的情况相比,这是非常大的……
总之,
最好使用FOREACH
在你的例子中,i<arr。长度需要更多的时间(通常在1.3左右)
请参阅测试: 查看测试
其他回答
现在是2018年,所以更新一下会很好……
我真的不同意这个公认的答案。 它在不同的浏览器上有所不同。有的forEach更快,有的for循环,有的while 这里是所有方法的基准https://jsben.ch/mW36e
arr.forEach( a => {
// ...
}
因为你可以看到很多for循环,比如for(a = 0;…)值得一提的是,如果没有'var',变量将被全局定义,这可能会极大地影响速度,因此它会变慢。
Duff's device run faster on opera but not in firefox var arr = arr = new Array(11111111).fill(255); var benches = [ [ "empty", () => { for(var a = 0, l = arr.length; a < l; a++); }] , ["for-loop", () => { for(var a = 0, l = arr.length; a < l; ++a) var b = arr[a] + 1; }] , ["for-loop++", () => { for(var a = 0, l = arr.length; a < l; a++) var b = arr[a] + 1; }] , ["for-loop - arr.length", () => { for(var a = 0; a < arr.length; ++a ) var b = arr[a] + 1; }] , ["reverse for-loop", () => { for(var a = arr.length - 1; a >= 0; --a ) var b = arr[a] + 1; }] ,["while-loop", () => { var a = 0, l = arr.length; while( a < l ) { var b = arr[a] + 1; ++a; } }] , ["reverse-do-while-loop", () => { var a = arr.length - 1; // CAREFUL do { var b = arr[a] + 1; } while(a--); }] , ["forEach", () => { arr.forEach( a => { var b = a + 1; }); }] , ["for const..in (only 3.3%)", () => { var ar = arr.slice(0,arr.length/33); for( const a in ar ) { var b = a + 1; } }] , ["for let..in (only 3.3%)", () => { var ar = arr.slice(0,arr.length/33); for( let a in ar ) { var b = a + 1; } }] , ["for var..in (only 3.3%)", () => { var ar = arr.slice(0,arr.length/33); for( var a in ar ) { var b = a + 1; } }] , ["Duff's device", () => { var len = arr.length; var i, n = len % 8 - 1; if (n > 0) { do { var b = arr[len-n] + 1; } while (--n); // n must be greater than 0 here } n = (len * 0.125) ^ 0; if (n > 0) { do { i = --n <<3; var b = arr[i] + 1; var c = arr[i+1] + 1; var d = arr[i+2] + 1; var e = arr[i+3] + 1; var f = arr[i+4] + 1; var g = arr[i+5] + 1; var h = arr[i+6] + 1; var k = arr[i+7] + 1; } while (n); // n must be greater than 0 here also } }]]; function bench(title, f) { var t0 = performance.now(); var res = f(); return performance.now() - t0; // console.log(`${title} took ${t1-t0} msec`); } var globalVarTime = bench( "for-loop without 'var'", () => { // Here if you forget to put 'var' so variables'll be global for(a = 0, l = arr.length; a < l; ++a) var b = arr[a] + 1; }); var times = benches.map( function(a) { arr = new Array(11111111).fill(255); return [a[0], bench(...a)] }).sort( (a,b) => a[1]-b[1] ); var max = times[times.length-1][1]; times = times.map( a => {a[2] = (a[1]/max)*100; return a; } ); var template = (title, time, n) => `<div>` + `<span>${title} </span>` + `<span style="width:${3+n/2}%"> ${Number(time.toFixed(3))}msec</span>` + `</div>`; var strRes = times.map( t => template(...t) ).join("\n") + `<br><br>for-loop without 'var' ${globalVarTime} msec.`; var $container = document.getElementById("container"); $container.innerHTML = strRes; body { color:#fff; background:#333; font-family:helvetica; } body > div > div { clear:both } body > div > div > span { float:left; width:43%; margin:3px 0; text-align:right; } body > div > div > span:nth-child(2) { text-align:left; background:darkorange; animation:showup .37s .111s; -webkit-animation:showup .37s .111s; } @keyframes showup { from { width:0; } } @-webkit-keyframes showup { from { width:0; } } <div id="container"> </div>
如果顺序不重要,我更喜欢这种风格:
for(var i = array.length; i--; )
它缓存了长度,写起来要短得多。但是它会以相反的顺序遍历数组。
我在这里有个测试。检查这个! https://gist.github.com/DungGramer/7efdfefecaa1b8f5d6510202524dc751
我的结果:
pop是最快的,forEach的可读性和速度最好 while比for快 如果没有条件,循环更快(如if) i是最快的
截至2016年6月,在最新的Chrome上做了一些测试(2016年5月,浏览器市场份额为71%,并且还在增加):
The fastest loop is a for loop, both with and without caching length delivering really similar performance. (The for loop with cached length sometimes delivered better results than the one without caching, but the difference is almost negligible, which means the engine might be already optimized to favor the standard and probably most straightforward for loop without caching). The while loop with decrements was approximately 1.5 times slower than the for loop. A loop using a callback function (like the standard forEach), was approximately 10 times slower than the for loop.
我相信这个线程太旧了,它误导程序员认为他们需要缓存长度,或者使用反向遍历,同时递减来获得更好的性能,编写的代码不太容易读懂,更容易出错,而不是简单直接的for循环。因此,我建议:
If your app iterates over a lot of items or your loop code is inside a function that is used often, a straightforward for loop is the answer: for (var i = 0; i < arr.length; i++) { // Do stuff with arr[i] or i } If your app doesn't really iterate through lots of items or you just need to do small iterations here and there, using the standard forEach callback or any similar function from your JS library of choice might be more understandable and less prone to errors, since index variable scope is closed and you don't need to use brackets, accessing the array value directly: arr.forEach(function(value, index) { // Do stuff with value or index }); If you really need to scratch a few milliseconds while iterating over billions of rows and the length of your array doesn't change through the process, you might consider caching the length in your for loop. Although I think this is really not necessary nowadays: for (var i = 0, len = arr.length; i < len; i++) { // Do stuff with arr[i] }
我已经尝试了一些其他方法来迭代一个巨大的数组,并发现将数组长度减半,然后在一个循环中迭代这两部分更快。这种性能差异可以在处理大型数组时看到。
var firstHalfLen =0;
var secondHalfLen = 0;
var count2=0;
var searchterm = "face";
var halfLen = arrayLength/2;
if(arrayLength%2==halfLen)
{
firstHalfLen = Math.ceil(halfLen);
secondHalfLen=Math.floor(halfLen);
}
else
{
firstHalfLen=halfLen;
secondHalfLen=halfLen;
}
for(var firstHalfCOunter=0,secondHalfCounter = arrayLength-secondHalfLen;
firstHalfCOunter < firstHalfLen;
firstHalfCOunter++)
{
if(mainArray[firstHalfCOunter].search(new RegExp(searchterm, "i"))> -1)
{
count2+=1;
}
if(secondHalfCounter < arrayLength)
{
if(mainArray[secondHalfCounter].search(new RegExp(searchterm, "i"))> -1)
{
count2+=1;
}
secondHalfCounter++;
}
}
缓存长度for循环与上面的方法之间的一些性能比较(使用timer.js)。
http://jsfiddle.net/tejzpr/bbLgzxgo/