javascript - JQuery grep(...) VS 原生 JavaScript filter(...) 函数性能

Question

我测量了这两个函数的执行时间：

• jQuery grep函数
• 原生 JavaScript过滤功能

使用 Chrome Profiles 工具测量了以下方法的执行情况：

// jQuery GREP function
function alternative1(words, wordToTest) {
  return $.grep(words, function(word) {
    return wordToTest.indexOf(word) != -1;                    
  });
}

// Native javascript FILTER function        
function alternative2(words, wordToTest) {
  return words.filter(function(word) {
    return wordToTest.indexOf(word) != -1;                    
  });
}

数组由words100 万个随机生成的字符串构成。每种方法运行 20 次。令我惊讶jQuery的是 grep 函数更快。

执行次数（20 次执行）：

• jQuery grep函数26,31s
• 原生 JavaScript过滤功能34,66s

您可以在此jsFidle上重复测量- 执行需要一些时间，所以请耐心等待。

有什么解释为什么 jQuery grep函数比原生JavaScript过滤函数更快？

PS：这个问题的灵感来自这个答案。

Answer 1

$.grep通过比较页面上实际使用的 jQuery 函数

function (a, b, c) {
    var d = [],
        e;
    c = !! c;
    for (var f = 0, g = a.length; f < g; f++) e = !! b(a[f], f), c !== e && d.push(a[f]);
    return d
}

（在此处检查未缩小的，谢谢Alexander）针对指定的算法

Array.prototype.filter.

在我看来，它就像.filter强制它this到Object，检查回调IsCallable并this在其中设置以及检查每次迭代中是否存在属性，而.grep假设并跳过这些步骤，这意味着发生的事情稍微少了一些。

将此与 Chrome 中的 JavaScript 编译器的性能结合起来，您可能会发现速度差异。

添加其中一些$.grep会使它看起来像

function (elems, callback, inv, thisArg) {
    var ret = [],
        retVal;
    inv = !!inv;
    for (var i = 0, length = elems.length; i < length; i++) {
        if (i in elems) { // check existance
            retVal = !!callback.call(thisArg, elems[i], i); // set callback this
            if (inv !== retVal) {
                ret.push(elems[i]);
            }
        }
    }
    return ret;
}

.filter 并花费与(modified Alexander's jsperf)大约相同的时间。