jQuery $.each 与 JavaScript .forEach答案

【问题标题】：jQuery $.each vs. JavaScript .forEachjQuery $.each 与 JavaScript .forEach
【发布时间】：2017-02-12 17:42:54
【问题描述】：

采取以下两种方式使用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(); });

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

【问题讨论】：

你的第二个是有偏见的，因为它仍然使用 jQuery。 collection.forEach(function(element) {element.parentNode.removeChild(element);}) 是一个更公平的比较。
不，$(selector).each() 以元素为参数调用函数，而不是 jQuery 对象。
收藏从何而来？通常使用 jQuery，您不需要创建自己的元素数组，因为 jQuery 对象会为您完成这项工作
要遍历数组，而不是 jQuery 对象中的元素，请使用 $.each(array, function...)，而不是 $(array).each(function...)
@charlietfl 例如，我将元素附加到 DOM 并希望将它们在附加时推送到数组中，以便更快地访问，而不是再次扫描 DOM。

标签： javascript jquery dom

【解决方案1】：

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

each implementation

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

如果不进行性能测试，它们非常相似。虽然如果您可以完全删除至少几 kb 的 jQuery，则不需要加载浏览器。

【讨论】：

【解决方案2】：

原始问题上的 cmets 非常适合您想要删除单个项目的特定场景。

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

1) Array.forEach() 显然要求您遍历数组。 jQuery 方法将允许您遍历 object 的 properties。

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

How to short circuit Array.forEach like calling break?

【讨论】：

【解决方案3】：

就性能而言，它们都相似Perf test

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

【讨论】：

【解决方案4】：

Array.forEach 是一种迭代原生 Javascript 数组的方法。

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

这在 jQuery 刚出现时也更相关，并且 Array.forEach 没有在任何浏览器中实现。

【讨论】：

你是根据标题回答的吗……？
这如何回答这个问题？