在jQuery中使用filter()更有效率,还是只在each()中这样做？

Question

我目前有代码通过jQuery提取数据,然后使用该each方法显示它.

但是,我遇到了一个排序问题,所以我在使用filter之前调查了jQuery的方法sort(这很有意义).

我现在正在考虑删除sort,并且我想知道我是否应该按filter原样离开呼叫,或者将其移回each.

过滤器的jQuery API文档中的示例包含样式结果,而不是文本内容的输出(特别是不使用each()).

文档目前声明"[t]他提供的选择器是针对每个元素[...]进行测试的",这让我相信做一个filter 和一个each会导致非过滤元素循环两次,而只有一次如果检查是在each循环中完成的.

我是否相信更有效率？

编辑:虚拟的例子.

所以这:

// data is XML content
data = data.filter(function (a) {
    return ($(this).attr('display') == "true");
});
data.each(function () {
    // do stuff here to output to the page
});

对此:

// data is XML content
data.each(function () {
    if ($(this).attr('display') == "true") {
        // do stuff here to output to the page
    }
});

Answer 1

正如你所说:

该文档目前声明"提供的选择器针对每个元素进行测试[...]",这使我相信做一个过滤器和每个过滤器会导致非过滤元素循环两次,而只检查一次仅在每个循环中完成.

通过您的代码,我们可以清楚地看到您each在两种情况下都在使用,已经是一个循环.并且filter它本身是另一个循环(如果它用于过滤).也就是说,我们将两个循环之间的性能与一个循环进行比较.不可避免地更少的循环=更好的性能.

我创建了这个小提琴,并使用Firebug Profiling Tool进行了分析.正如所料,第二个选项 只有一个循环是更快的.当然,由于这些少量元素,差异仅为0.062ms.但显然,差异将随着更多元素线性增加.

由于许多人非常担心地说差异很小而你应该根据可维护性进行选择,我随意表达我的意见:我也同意这一点.事实上,我认为更易于维护的代码没有过滤器,但这只是一个品味问题.最后,你的问题是什么更有效,这就是答案,虽然差异很小.

Answer 2

你是正确的,使用过滤器,每个都较慢.只使用每个循环更快.在可能的情况下,优化它以使用更少的循环.

但这是微观优化.这应该只在它"免费"时进行优化,而不是以可读代码为代价.我个人会选择使用一种或另一种基于样式/可读性偏好而不是性能.

除非你有大量的DOM元素,否则你不会注意到它们之间的区别(如果你这样做,那么你会遇到更大的问题).

如果你关心这种差异,那么你关心不使用jQuery,因为jQuery很慢.

您应该关注的是可读性和可维护性.

$(selector).filter(function() {
    // get elements I care about
}).each(function() {
    // deal with them
});

VS

$(selector).each(function() {
    // get elements I care about
    if (condition) {
         // deal with them
    }
}

无论哪个使您的代码更易读和可维护是最佳选择.作为一个单独的笔记过滤器,如果与之一起使用,.map则会更强大.each.

我还要指出,从两个循环优化到一个循环是从优化O(n)到O(n).这不是你应该关心的事情.在过去,我也觉得将所有内容放在一个循环中会"更好",因为你只循环一次,但这确实限制了你使用map/reduce/filter.

编写有意义的自我记录代码.只是优化瓶颈.