Question

使用jQuery从DOM中删除元素数组的以下两种方法：

var collection = [...]; //  An array of jQuery DOM objects

// Using jQuery iteration
$(collection).each(function(index, element) { element.remove(); });

// Or as pointed out by Barmar
$(collection).remove();

// Using native iteration
collection.forEach(function(element) { element.remove(); });

在操作上有任何实际区别吗？我希望，除非浏览器解释器/编译器足够聪明，否则前一种方法会产生额外的不必要的开销，尽管如果数组很小，可能会很小。

Answer 1

操作上有点模糊，但这里是$ .each的实现方式

https://github.com/jquery/jquery/blob/master/src/core.js#L296

[].forEach()最有可能在每个浏览器的本机代码中实现。

没有进行性能测试，它们非常相似。虽然如果你可以删除至少几kb的jquery浏览器不需要加载

Answer 2

关于原始问题的评论非常适合您希望删除单个项目的特定情况。

一般来说，还有其他一些区别：

1）Array.forEach（）显然要求您遍历数组。 jQuery方法将让您遍历对象的 properties 。

2）jQuery.each（）允许短路。看看这篇文章提到使用“ some（）”和“ every（）”来使用纯js做类似的事情：

How to short circuit Array.forEach like calling break?

Answer 3

在性能方面，它们两者都是相似的Perf test

forEach 是在浏览器中本地实现的，这使得非jquery开发人员更易于维护，而另一方面每个则提供了更好的可读性。

Answer 4

这可能不是真正的区别，但我在使用延迟和队列函数时注意到的一个区别是 .forEach 函数为数组的每个元素执行一次给定的函数，并在执行另一个相同的函数之前等待该函数完成再次用于另一个元素。换句话说，每次迭代都可以排队和延迟，而 $.each 函数为每个集合执行一次函数，但在执行相同函数之前它不会等待函数完成。换句话说，它同时执行所有这些。例如

 var number = ['one', 'two', 'three','four','five'];    
    number.forEach(function(item)         
            {
                $(this).delay(500).queue(function ()
                {
                    $("."+item).addClass("selected ");
                    $(this).dequeue();
                })
            })

这里队列和延迟功能起作用了。每个函数在队列中完成后执行

虽然使用 jquery 时相同

var number = ['one', 'two', 'three','four','five'];     
$.each(number , function (index, item){ 
   $("."+item).addClass("selected ");
                $(this).delay(500).queue(function ()
                {
                    $("."+item).addClass("selected ");
                    $(this).dequeue();
                })   
});

这会输出错误... Javascript 或 Jquery 专家可能会说为什么会这样。附注。我在 JQuery 3.4.1 上检查过

Answer 5

Array.forEach是一种迭代本机Javascript数组的方法。

jQuery collection.each是jQuery团队手工实现的迭代方法。 jQuery集合不是数组。

当jQuery第一次出现时，这也更加相关，并且在任何浏览器中都没有实现Array.forEach。

jQuery $ .each与JavaScript .forEach

5 个答案: