JavaScript数组添加元素性能对比：索引器、push与concat

JavaScript数组添加元素性能对比：索引器、push与concat

本文对四种向数组添加元素的方法进行了性能比较：

方法一：使用索引器直接赋值

console.time("index");
var a = [];
for (var i = 0, l = times; i < l; i++) {
a[i] = i;
}
console.timeEnd("index");

方法二：使用push方法

console.time("push");
var a = [];
for (var i = 0, l = times; i < l; i++) {
a.push(i);
}
console.timeEnd("push");

方法三：使用concat方法（非数组参数）

console.time("concat");
var a = [];
for (var i = 0, l = times; i < l; i++) {
a.concat(i);
}
console.timeEnd("concat");

方法四：使用concat方法（数组参数）

console.time("concat with array");
var a = [];
for (var i = 0, l = times; i < l; i++) {
a.concat([i]);
}
console.timeEnd("concat with array");

当循环次数times设置为10000（一万）次时：

index: 0.310ms
push: 1.476ms
concat: 8.911ms
concat with array: 2.261ms

当循环次数times设置为100000（十万）次时：

index: 1.967ms
push: 11.980ms
concat: 70.410ms
concat with array: 28.292ms

当循环次数times设置为1000000（百万）次时：

index: 138.559ms
push: 93.074ms
concat: 608.768ms
concat with array: 243.371ms

当循环次数times设置为10000000（千万）次时：

index: 1473.733ms
push: 611.636ms
concat: 6058.528ms
concat with array: 2431.689ms

不同浏览器对比

总结

需注意，上述结论主要基于Chrome浏览器的测试结果。

concat方法的执行效率在所有方法中最低。比较两种concat传参方式，传入数组参数的执行效率高于传入非数组参数。在多数情况下，索引器赋值的效率高于push方法；但随着执行次数增加到千万级，索引器的效率开始低于push方法。

不同浏览器对比

感谢网友指正，由于作者经验有限，此处补充不同浏览器之间的横向对比数据。

首先观察concat方法，在IE和Firefox中，传入数组参数的执行效率反而略低于传入非数组参数，但差异不明显。index和push方法比concat快是确定的。在IE中，index方法始终比push快；在Firefox中，push略胜一筹，但差异不大。三个浏览器之间index和push的执行效率差异巨大，Firefox的执行效率比IE和Chrome高出不少，在百万次测试下，Firefox基本快10倍，而IE相比另外两者最慢。

以下为百万次测试的具体结果：

// firefox
index: timer started
index: 229.79ms
push: timer started
push: 205.12ms
concat: timer started
concat: 2136.99ms
concat with array: timer started
concat with array: 2365.18ms
```

// ie
index: 2,533.744 毫秒
push: 3,865.979 毫秒
concat: 4,303.139 毫秒
concat with array: 4,792.208 毫秒

本文旨在探讨JavaScript的性能表现，通过对比帮助读者加深对JavaScript的理解。