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

Question

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

• jQuery grep 函数
• 原生 JavaScript filter 函数

已使用 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;                    
  });
}

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

执行次数（20 次执行）：

• jQuery grep函数26,31s
• 原生 JavaScript filter 函数 34,66s

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

有什么解释为什么 jQuery grep 函数比 native JavaScript filter 函数更快吗？

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

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
}

（检查here 是否未缩小，感谢Alexander）针对指定为的the algorithm

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) 花费的时间大致相同。