$.each() 与 for() 循环 - 和性能

Question

这些主要只是我一直想知道的一些事情，也许有人可以给我更多的见解，我也会分享我到目前为止所注意到的！

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

$('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 here，您会发现速度差异基本上与它们中的任何一个相同，但更重要的是我觉得我应该始终 正在使用for() 循环...

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

---

问题 :: 我想我最大的问题是，为什么不总是在遍历对象时使用 for 循环？使用 $.each() 有什么意义吗？即使在遍历 jQuery 对象时，你是否总是使用 for() 循环？

jsFiddle DEMO here

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 美分。 :)

Answer 1

.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
});

---

I played around with your JSFiddle 了解在您必须遍历原始匹配元素集的子集的情况下，链接如何影响性能。

结果并没有那么出乎意料，尽管我认为end() 的开销在这里被夸大了，因为它结合了少量元素和许多循环。除此之外：普通的 JS 循环仍然稍微快一些，但这是否与 .each()（和链接）增加的可读性相称是值得商榷的。

Answer 2

当我访问您的链接时，我得到了两个数字：

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

如果差异那么小，则选择可读性最强的那个，但是，如果您对时间的要求非常高，那么您可能只需要选择最终最快的那个。

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

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach

您知道自己的要求是什么，以及您的程序会做什么，所以只需编写自己的测试并确保它满足您将支持的浏览器的要求。

对于您的第一个问题，我会选择$('element').each，因为它更容易阅读，但这只是我的看法。

Answer 3

您使用.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);
   }); 
});

简单多了，不是吗？

Answer 4

我在http://jsperf.com/forloops3 前进行了一些简单的性能测试。似乎坚持简单的、旧的for loop（在可能的情况下）是要走的路:)

Answer 5

其实$.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

Answer 6

jQuery.each 与 for 循环

jQuery.each 的优点：

• 非常适合 jQuery 代码（链接和样式）。
• 不用担心范围（对迭代器和对象的引用将保持不变）。
• 可以通用（用于各种对象和迭代对象键）。

for循环的优点：

• 高性能（用于游戏/动画/大型数据集）。
• 完全控制迭代器（跳过项目、拼接列表中的项目等）。
• 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 可能会更容易。如果出现性能问题，您可以随时查看。