如何将 jQuery each() 变成常规的 javascript 循环

Posted 2023-03-15

【中文标题】如何将 jQuery each() 变成常规的 javascript 循环

【英文标题】：How to turn jQuery each() into regular javascript loop

【发布时间】：2012-08-20 11:13:20

【问题描述】：

几个问题：

常规的 javascript 循环（循环一系列元素）是否比使用 jQuery each() 更快/更高效？？

如果是这样，将以下代码编写为常规 javascript 循环的最佳方法是什么？

$('div').each(function() //... )

【问题讨论】：

如果您真的对循环效率感兴趣，请看这里。 ***.com/questions/1340589/…

for 循环更快，但请注意，如果您在循环中执行的操作涉及稍后需要使用循环索引变量的回调函数，那么您需要引入一个闭包并且会（或多或少）抵消效率提升。

【参考方案1】：

是的，删除 each() 会给您带来更好的性能。这就是您可以为元素列表编写 for 循环的方法。

var divs = $('div');

for(var i = 0; i < divs.length; i++)
    var thisDiv = divs[i]; // element

    var $thisDiv = $(divs[i]); // jquery object

    // do stuff

【讨论】：

要回答问题的第一部分，是的，由于消除了一些开销，因此常规循环的效率会更高一些。差别应该很小。

divs[i] 是一个 jquery 对象吗？例如，当我执行thisDiv.find('a') 时，我得到一个错误...

divs[i] 不是 jquery 对象。你必须$(divs[i])

在循环外声明divs.length 更快

【参考方案2】：

var divs = document.getElementsByTagName('div'),
    l = divs.length, i, cur;

for(i=0; i<l; i++) 
    cur = divs[i];
    // do stuff with cur here

请继续以效率的名义移除 jQuery。这段代码比 jQuery 等价代码快大约 50 倍。

【讨论】：

如果您在“在这里用 cur 做事”部分没有任何内容，它只会快 50 倍。它更快，但 50 倍在宏伟计划中具有误导性。

【参考方案3】：

回答你的第二个问题，因为第一个问题已经回答了；

我也对此感兴趣，因此我决定使用 Gabe 的示例对两者进行基准测试以找出差异。答案是，在想要一个 jQuery 对象作为最终结果的情况下：

它们的表现完全相同。

http://jsperf.com/jquery-each-vs-native-selectors

显然，Firefox 实际上找到 jQuery 版本的速度更快。

【参考方案4】：

而不是使用 jquery .each()

$('div').each(function() //... )

您可以使用document.querySelectorAll()，然后将 htmlCollection 转换为 JavaScript 数组。然后你可以映射元素数组。

 const elems = document.querySelectorAll('.my-elements')
 const $elems = [].slice.call(elems)
 $elems.map( (elem) =>  console.log(elem) )