每次将i与array.length进行比较时,是否循环检查array.length？

Question

我在浏览,我发现了这个:

var i, len;
for(i = 0, len = array.length; i < len; i++) {  
   //...
}

我的第一个想法是:

• 他为什么那样做？(出于某种原因必须更好)
• 这值得么？(我假设是的,为什么他会这样做呢？)

是否正常循环(不缓存长度的循环)array.length每次检查？

Answer 1

由三部分组成的循环执行如下:

for (A; B; C)

A - Executed before the enumeration
B - condition to test
C - expression after each enumeration (so, not if B evaluated to false)

所以,是的:.length如果构造为数组,则在每个枚举中检查数组的属性for(var i=0; i<array.length; i++).对于微优化,将数组的长度存储在临时变量中是有效的(另请参阅:在JavaScript中循环遍历数组的最快方法是什么？).

相当于for (var i=0; i<array.length; i++) { ... }:

var i = 0;
while (i < array.length) {
    ...
    i++;
}

Answer 2

Is it worth it? (obviously yes, why else he will do it this way?)

绝对没错.因为,正如你所说,循环每次都会计算数组长度.所以这将导致巨大的开销.在您的firebug或chrome dev工具中运行以下代码段

// create an array with 50.000 items
(function(){
    window.items = [];
    for (var i = 0; i < 50000; i++) {
        items.push(i);
    }
})();

// a profiler function that will return given function's execution time in milliseconds
var getExecutionTime = function(fn) {
    var start = new Date().getTime();
    fn();
    var end = new Date().getTime();
    console.log(end - start);
}

var optimized = function() {
    var newItems = [];
    for (var i = 0, len = items.length; i < len; i++) {
        newItems.push(items[i]);
    }
};


var unOptimized = function() {
    var newItems= [];
    for (var i = 0; i < items.length; i++) {
        newItems.push(items[i]);
    }
};

getExecutionTime(optimized);
getExecutionTime(unOptimized);

以下是各种浏览器的近似结果

Browser    optimized    unOptimized
Firefox    14           26
Chrome     15           32
IE9        22           40
IE8        82           157
IE7        76           148 

所以再考虑一下,并使用优化方式:)
注意:我尝试在jsPerf上运行此代码,但我现在无法访问jsPerf.我猜,当我尝试的时候它已经失效了.