JS往數組中新增項目效能分析_javascript技巧

比較了4種可以新增項目給陣列的方法之間的效能：

使用索引器加入

複製程式碼 程式碼如下:

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

使用push方法

複製程式碼 程式碼如下:

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

使用concat方法

複製程式碼 程式碼如下:

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

使用concat方法，參數為陣列

複製程式碼 程式碼如下:

console.time("concat with array");
var a = [];
for (var i = 0, l = times; 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略勝一籌但差異不大
比較3個瀏覽器之間index和push方法的執行效率差異是巨大的，firefox的執行效率要比ie和chrome高出不少，在百萬次的情況下，基本快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 毫秒

本文只是探討JS的性能，透過對比加深小夥伴們對javascript的理解，希望大家能夠喜歡。