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

Question

几个问题：

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

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

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

Answer 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
}

Answer 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 倍。

Answer 3

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

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

它们的表现完全相同。

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

显然，Firefox 实际上更快地找到了 jQuery 版本。

Answer 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) })