Array.map 的 Javascript 性能

刚刚在 jsperf 中编写了一些测试用例来测试使用时命名函数和匿名函数之间的区别Array.map和其他替代方案。

http://jsperf.com/map-reduce-named-functions http://jsperf.com/map-reduce-named-functions

（请原谅网址名称，没有测试过Array.reduce在这里，我在完全决定要测试的内容之前命名了测试）

一个简单的 for/while 循环显然是最快的，但我仍然对慢 10 倍以上感到惊讶Array.map尽管...

然后我尝试了mozilla的polyfillhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Polyfill https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Polyfill

Array.prototype.map = function(fun /*, thisArg */)
{
    "use strict";

    if (this === void 0 || this === null)
        throw new TypeError();

    var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun !== "function")
        throw new TypeError();

    var res = new Array(len);
    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
    for (var i = 0; i < len; i++)
    {
        // NOTE: Absolute correctness would demand Object.defineProperty
        //       be used.  But this method is fairly new, and failure is
        //       possible only if Object.prototype or Array.prototype
        //       has a property |i| (very unlikely), so use a less-correct
        //       but more portable alternative.
        if (i in t)
            res[i] = fun.call(thisArg, t[i], i, t);
    }

    return res;
};

然后我尝试了我自己编写的一个简单的实现......

Array.prototype.map3 = function(callback /*, thisArg */) {
    'use strict';
    if (typeof callback !== 'function') {
        throw new TypeError();
    }

    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;

    for (var i = 0, len = this.length; i < len; i++) {
        this[i] = callback.call(thisArg, this[i], i, this);
    };
};

结果摘要：

从最快到最慢：

1. 对于简单/同时（大约相同）
2. Map3（我自己的实现）
3. Map2（Mozilla 填充）
4. Array.map
5. for in

观察结果

有趣的是，命名函数通常比使用匿名函数要快一些（大约 5%）。但我注意到，在 firefox 中使用命名函数时，polyfill 速度较慢，但​​在 chrome 中速度较快，但 chrome 自己的地图实现在使用命名函数时速度较慢...我每个测试了大约 10 倍，所以即使它不是严格的密集测试（jsperf已经这样做了），除非我的运气那么好，否则它应该足以作为指导方针。

另外，镀铬的map在我的机器上，该功能比 Firefox 慢 2 倍。根本没想到会这样。

还有... Firefox 自己的Array.map实现速度比 Mozilla Polyfill 慢...哈哈

我不确定为什么 ECMA-262 规范会这样规定map可用于数组以外的对象（http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.19 http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.19）。这使得整个映射函数慢了 3-4 倍（如我的测试所示），因为您需要在每个循环中检查属性是否存在......

结论

如果您考虑到不同浏览器的性能略有不同，那么命名函数和匿名函数之间并没有太大区别。

归根结底，我们不应该进行太多的微观优化，但我发现这很有趣:)

首先，这不是一个公平的比较。正如你所说，正确的 javascript 地图能够使用对象，而不仅仅是数组。所以你基本上是在比较两个完全不同的函数和不同的算法/结果/内部工作原理。

当然，正确的 javascript 映射速度较慢 - 它被设计为在更大的域上工作，而不是在数组上进行简单的操作。