jQuery 中的 .each() 函数相对于传统"for"循环的优势

Question

我的一个同事建议我使用jQuery的.each()函数而不是javascript的for循环来遍历我页面上的DOM元素，我不是jQuery的新手，但从来没有理解为什么开发人员倾向于使用.each()而不是javascript的for循环背后的真正原因。有人能给我解释一下吗?

Answer 1

如果您想使用for循环进行迭代，则必须增加索引:

for(var i=0; i<arr.length; ++i) {

，然后你必须得到实际的值使用索引:

var value = arr[i];

.each为您完成这两项工作，并将值传递给函数:

$(...).each(function(i, value) {
    // actual interesting part of the loop...
});

它只是为您节省了增加索引并获取该索引处的值的样板代码。

在.each函数中定义的变量也被关闭(即在闭包中)，因此等效代码(考虑循环和变量闭包，加上设置this，以及在false返回值上中断)可能类似于:

(function() {
    for(var i=0; i<arr.length; ++i) {
        var ret = (function(index, value) {
            // actual interesting part of the loop...
        }).call(arr[i], i, arr[i]);
        if(ret === false) break;
    }
})();

这是相当多的键入。

在执行性能方面，.each(毫不奇怪)比原始for循环慢，因为它比原始for循环做得更多。

Answer 2

使用起来很方便

但是在这个测试结果中显示它是缓慢的。http://jsperf.com/jquery-each-vs-for-loop/214

Answer 3

因为这样比较容易&

$jqExpr.each(function(i, el){
   /* YOUR CODE */
});
than
for(var i=0; i < $jqQExpr.length; i++){
  el = $jqExp[i];
  /* YOUR CODE */
}

Answer 4

它更慢，但更具表现力(更短)，并且还设置了闭包。此外，在jQuery集合上，它可以很好地集成到链接中;而对于普通数组，我建议使用本地.forEach方法。

Answer 5

对于我来说，如果使用each而不是for，还有一个重要的好处闭包副作用。

考虑下面的代码(我使用coffeescript，因为我发现…)，它用它的href值提醒所有链接:

$("a").each (i, e)->
  href = $(e).attr('href')
  $(e).on "click" alert(href)

如果你把它"翻译"成一个简单的for循环，比如:

for e in $("a")
  href = $(e).attr('href')
  $(e).on "click" alert(href)

这个代码不能工作，因为href变量没有包含在闭包中…