javascript - 为什么 [].concat() 比 Array.prototype.concat() 快？

Question

我测试了各种数组连接技术，并不是因为它实际上对我的代码很重要，而只是顺便说一句，看看我们现在在哪里。正如预期的那样，非常新的 ES 2015 传播运算符在 JavaScript 数组上被旧的 concat() 方法击败了相当大的优势。

然而，当我比较这两者时，让我有点吃惊的是:

var a = b = c = [1,2,3,4,5];

// SLOWER (V8 and Edge, very slightly faster in Firefox)
console.time('t1');
for (i = 0; i < 1000000; i++) {
  Array.prototype.concat(a, b, c);
};
console.timeEnd('t1')

// FASTER (V8 and Edge, very slightly slower in Firefox)
console.time('t2');
for (i = 0; i < 1000000; i++) {
  [].concat(a, b, c);
};
console.timeEnd('t2')

在执行下一个之前，我在最新的 Node.js、Chrome 和 Edge 浏览器上测试并运行了多次。对于 V8(Node.js、Chrome)，结果甚至更大，但即使对于 Edge，第一个选项也总是很明显——在 V8 上明显比第二个选项慢。在 Firefox 中结果相反但几乎相等，所以让我们将问题限制在其他两个浏览器引擎(V8 和 Chakra)上。

所以我只是出于好奇才问，因为我根本没有预见到这一点，

1) 除了性能之外，这两种连接这些数组的方法之间有什么实际区别吗？

2) 为什么 AFAICS 创建一个对象(数组)比另一个对象(初始数组)慢？

---

我知道方法是相同的，这就是为什么我测试了对原型(prototype)上方法的直接访问，而不是创建(未使用的)数组对象来访问它。我也知道它依赖于浏览器，这就是 a) 为什么我测试了两个基于 V8 的系统(Chrome 和 Node.js)和 Microsoft Edge 浏览器，以及 b) 为什么我在上面包含了可运行的测试用例。

Answer 1

Array.prototype.concat 需要在每个循环中解析。如果您只查找该函数一次，您会看到不同的结果。不过，这可能会因运行时的实现而异。

var a = b = c = [1,2,3,4,5];

// Array.prototype.concat
console.time('t1');
var apc = Array.prototype.concat;
for (i = 0; i < 1000000; i++) {
  apc.call([], a, b, c);
};
console.timeEnd('t1')

// [].concat
console.time('t2');
for (i = 0; i < 1000000; i++) {
  [].concat(a, b, c);
};
console.timeEnd('t2')

// They're the same:
console.log(Array.prototype.concat === [].concat);

要获得更准确的结果，请使用适当的基准测试库(例如消除预热时间)。