这些主要是我一直在想的一些事情,也许有人能给我更多的洞察力,我也会分享我到目前为止注意到的东西!
我想知道的第一件事..。有没有什么好的或有理由使用的区别:
$('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
}
如果你查看这个,你会发现速度上的差异基本上等同于它们中的任何一个,但更重要的是,我觉得我应该总是使用for()
循环……
我只是在进行单元测试(循环遍历5个不同的场景函数,50,000次),简单地循环遍历一堆列表项,并设置一个data-newAttr
,没有什么特别的。
问题:我想我最大的问题是,为什么不在迭代对象时始终使用循环呢?使用$.each()有意义吗?即使在遍历jQuery对象时,您也总是使用for()循环吗?
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分钱。:)
发布于 2012-08-10 00:11:43
.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 ,了解在必须循环遍历原始匹配元素集的子集的情况下,链接将如何影响性能。
结果并不完全出乎意料,尽管我认为end()
的开销在这里被夸大了,因为它结合了几个元素和许多循环。除此之外:普通的JS循环仍然稍微快一些,但这是否足以增加.each()
(和链接)的可读性还存在争议。
发布于 2012-08-10 00:28:53
使用.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);
});
});
简单多了,不是吗?
发布于 2014-09-11 06:56:01
jQuery.each vs for循环
优势jQuery.each:
for-loop的优点:
示例代码
这是我喜欢迭代列表的示例代码。
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-loop,并且仅在必要时使用闭包。但是,当您的代码看起来更像jQuery而不是Javascript时,只使用$.each
__可能会更容易。如果出现性能问题,您可以随时在事后进行调查。
https://stackoverflow.com/questions/11887450
复制相似问题