基于 javascript 函数的迭代的替代方案（例如 jQuery.each()）

Question

我一直在观看 Google 技术讲座加速您的 Javascript 并讨论循环，演讲者提到要远离基于函数的迭代，例如 jQuery.each()（以及其他，在视频中的 24:05 左右）。他简要解释了为什么要避免它们，这是有道理的，但不可否认，我不太明白替代方案是什么。比如说，在这种情况下，我想迭代一列表格单元格并使用该值来操作相邻单元格的值（只是一个简单的示例）。谁能解释并给出基于函数的迭代的替代方案的示例？

Answer 1

如果您需要循环，那么简单的 for 循环应该会更快。

var l = collection.length;
for (var i = 0; i<l; i++) {
  //do stuff
} 

但是，仅仅因为它更快并不意味着它总是很重要。

它在客户端运行，而不是在服务器上运行，因此您无需担心用户数量的扩展，如果使用 .each() 很快，那么就保留它。但是，如果速度很慢，for 循环可以加快速度。

Answer 2

古老的 for 循环

Answer 3

在我看来，基于函数的迭代会稍微慢一些，因为 1）函数本身的开销，2）创建和执行 N 次回调函数的开销，以及 3）额外的深度在作用域链中。然而，我想我应该做一个快速基准测试只是为了好玩。事实证明，至少在我的简单测试用例中，基于函数的迭代速度更快。这是代码和结果

测试基准代码

// Function based iteration method
var forEach = function(_a, callback) {
  for ( var _i=0; _i<_a.length; _i++ ) {
    callback(_a[_i], _i);
  }
}

// Generate a big ass array with numbers 0..N
var a = [], LENGTH = 1024 * 10;
for ( var i=0; i<LENGTH; i++ ) { a.push(i); }

console.log("Array length: %d", LENGTH);

// Test 1: function-based iteration
console.info("function-base iteration");
var end1 = 0, start1 = new Date().getTime();

var sum1 = 0;
forEach(a, function(value, index) { sum1 += value; });

end1 = new Date().getTime();
console.log("Time: %sms; Sum: %d", end1 - start1, sum1);

// Test 2: normal for-loop iteration
console.info("Normal for-loop");
var end2 = 0, start2 = new Date().getTime();

var sum2 = 0;
for (var j=0; j<a.length; j++) { sum2 += a[j]; }

end2 = new Date().getTime();
console.log("Time: %sms; Sum: %d", end2 - start2, sum2);

每个测试只是对数组进行求和，这很简单，但可以在某种现实生活场景中实际看到。

FF 3.5 的结果

Array length: 10240
function-base iteration
Time: 9ms; Sum: 52423680
Normal for-loop
Time: 22ms; Sum: 52423680

事实证明，基本的 for 迭代在此测试用例中速度更快。我还没有看过视频，但我会看一下，看看他是否在某些地方有所不同，导致基于函数的迭代变慢。

编辑：这绝不是最终的结果，只是一个引擎和一个测试用例的结果。我完全预计结果会是相反的（基于函数的迭代速度较慢），但有趣的是看到某些浏览器如何进行优化（可能或可能不是专门针对这种风格的 JavaScript），以便事实恰恰相反。

Answer 4

最快的迭代方法是减少在循环中执行的操作。将内容从迭代中取出并最小化循环内的查找/增量，例如

var i = arr.length;

while (i--) {
   console.log("Item no "+i+" is "+arr[i]);
}

注意！通过在最新的 Safari（使用 WebKit nightly）、Chrome 和 Firefox 上进行测试，您会发现它确实没有无论您选择哪种类型的循环，如果它不是 foreach 或 for in（或者更糟糕的是，任何基于它们构建的派生函数）。

另外，事实证明，以下 for 循环比上面的选项还要快一点：

var l = arr.length;

for (var i=l; i--;) {
    console.log("Item no "+i+" is "+arr[i]);
}

Answer 5

如果循环的顺序并不重要，那么以下应该是最快的，因为您只需要一个局部变量；另外，递减计数器和边界检查是用一条语句完成的：

var i = foo.length;
if(i) do { // check for i != 0
    // do stuff with `foo[i]`
} while(--i);

我通常使用的是以下内容：

for(var i = foo.length; i--; ) {
    // do stuff with `foo[i]`
}

它可能比以前的版本慢（后递减与预递减，for与while），但更具可读性。