Question

我的一位同事建议我使用jQuery .each()函数而不是javascript for循环来遍历我页面上的DOM元素，我不是jQuery中的新手，但从未理解过开发人员倾向于使用.each()代替javascript循环的真正原因。任何人都可以向我解释一下吗？

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函数中定义的变量也被关闭（即在closure内），因此等效代码（考虑循环和变量闭包，加上设置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

因为它更容易＆amp;清洁工做

$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 method。

Answer 5

对我来说，如果你使用的每一个都有一个重要的好处关闭副作用。

考虑下面的代码（我正在使用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变量未包含在闭包中......

jQuery中的.each（）函数优于传统的“for”循环

5 个答案: