$ .each（）vs for（）循环-和性能

这些主要只是我一直想知道的事情，也许有人可以给我更多关于它们的见解，我将分享到目前为止我已经注意到的内容！

我一直想知道的第一件事...使用的好处或理由有什么不同：

$('element').each(function (i, el) { });

- 与 -

$.each($('element'), function (i, el) { });

查看jQuery文档，我看不到任何一个韵律或原因（也许您知道一个实例或其他可以做的事情）。

但更重要的是我在这里关心速度

// As opposed to $.each() looping through a jQuery object
// -- 8x faster 
for (var i = 0, $('.whatever').length; i < len; i++) {
    $('.whatever')[i] // do stuff
}

如果您在此处查看此jsFiddle DEMO，您将看到速度差异基本上与它们中的任何一个相等，但更重要的是，我觉得我应该始终使用for()循环...

我只是进行单元测试（遍历5个不同的场景功能中的每一个，50,000次），仅遍历一堆列表项，并设置a data-newAttr，没什么特别的。

问题::我猜我最大的问题是，为什么在遍历对象时不总是使用for循环？甚至还有使用$ .each（）的意义吗？即使遍历jQuery对象，您是否总是使用for（）循环？

jsFiddle演示在这里

Function type:                  Execution Time:
_testArea.each() + $(this)               1947   <-- using $(this) slows it down tremendously
$.each()         + $(this)               1940
_testArea.each() + el(plain JS)           458   <-- using the Element speeds things up
$.each()         + el(plain JS)           452
for() loop       + plainJS[0] iteration   236   <-- over 8x faster

就是我的2美分。:)

.each()允许您执行for循环操作无法完成的一件事是链接。

$('.rows').each(function(i, el) {
    // do something with ALL the rows
}).filter('.even').each(function(i, el) {
    // do something with the even rows
});

我与您的JSFiddle一起玩耍，以了解在您必须遍历原始匹配元素集的子集的情况下，链接将如何影响性能。

结果并不是出乎意料的，尽管我认为end()由于少量元素和许多循环的结合，此处的开销被夸大了。除此之外，普通的JS循环仍然略快一些，但是这是否会影响.each()（和链接）附加的可读性尚有争议。

您要做的一件事.each()是自动局部作用域（因为您正在为每个对象调用一个匿名函数），这反过来意味着，如果您要创建更多的匿名函数/闭包/事件处理程序/无论每次迭代如何，您都不必担心您的处理程序共享变量。也就是说，就本地范围而言，JavaScript不像其他语言那样工作，但是因为您可以在任何地方声明变量，所以有时它会欺骗您。

换句话说，这是错误的：

var idx,el;
for (idx = 0; idx <someObjectArray.length; idx++){
   el = someObjectArray[idx]
   el.someEventHandler(function(){  
       alert( "this is element " + idx);
   }); 
}

每当这些对象中的任何一个在此循环后调用它们的“ someEvent”时（请注意，这是组成的），警报总是会说最后分配给的对象idx，应该是（被调用时）someObjectArray.length；

为了确保保存正确的索引，您必须声明一个局部作用域，创建一个变量并分配给该变量以供使用。

var idx,el;
for (idx = 0; idx <someObjectArray.length; idx++){
   el = someObjectArray[idx];
   (function(){
       var localidx = idx;
       el.someEventHandler(function(){  
           alert( "this is element " + localidx);
       }); 
   })();
}

如您所见，这很可怕，但是应该可以。每个事件处理程序都有自己的副本localidx

现在比较一下 .each()

$(someObjectArray).each(function (idx, el) { 
   el.someEventHandler(function(){  
       alert( "this is element " + idx);
   }); 
});

简单得多，不是吗？

jQuery.each与for循环

优点jQuery.each：

• 非常适合jQuery代码（链接和样式）。
• 不用担心范围（对迭代器和对象的引用将是持久的）。
• 可以通用使用（用于所有类型的对象并遍历对象键）。

循环优势：

• 高性能（用于游戏/动画/大型数据集）。
• 完全控制迭代器（跳过项，列表中的拼接项等）。
• for循环将始终有效，因为它不依赖jQuery。
• 与大多数其他类似语言相同的语法。

范例程式码

这是我更喜欢遍历列表的示例代码。

var list = ['a', 'b', 'c', 'd', 'e', 'f'];

jQuery.each：

$.each(list, function(i, v)
{
    // code...
});

For循环，无闭包：

for(var i=0,v,n=list.length;i<n;i+=1)
{
    v = list[i];
    // code...
}

带闭环的for循环：

for(var i=0,n=list.length;i<n;i+=1)
{
    (function(i, v)
    {
        // code...
    })(i, list[i]);
}

注意：我建议您只使用标准的for循环，并且仅在必要时使用闭包。但是，无论如何，当您的代码看起来更像jQuery而不是Javascript时，仅使用它可能会更容易$.each。如果出现性能问题，您以后可以随时进行调查。

我之前进行了一些简单的性能测试，http://jsperf.com/forloops3。似乎坚持朴素，古老for loop（可能的话）是可行的方法:)

当我转到您的链接时，这里有两个数字：

$.each() + el(plain JS) 401
for() loop + plainJS[0] iteration   377

如果差异很小，那么请选择可读性最强的产品，但是，如果您对时间的要求很高，则可能只需要选择最快的产品即可。

我建议您编写程序以使用三种不同的方法，即上述两种，然后使用在较新版本的javascript中找到的foreach，对于不支持它的浏览器，可以将其添加为原型。

https://developer.mozilla.org/zh-CN/docs/JavaScript/Reference/Global_Objects/Array/forEach

您知道自己的要求以及程序将执行的操作，因此只需编写您自己的测试，并确保它满足您将支持的浏览器中的要求。

对于您的第一个问题，我会同意，$('element').each因为它很容易阅读，但这只是我的观点。

实际上，$ .each（）和$（）。each（）之间有很大的区别。

根据您要传递的内容，它们执行的操作略有不同。

http://api.jquery.com/each/与http://api.jquery.com/jquery.each/

jquery.each是一个通用的迭代器，其中$（）。each（）特定于jquery集合。

另请参阅：http : //jsperf.com/each-vs-each-vs-for-in/9