javascript 三種數組複製方法的性能對比

時間 2019-12-07

標籤 javascript 三種數組複製方法性能對比欄目 JavaScript 简体版

原文原文鏈接

javascript 三種數組複製方法的性能對比,對於webkit, 使用concat; 其餘瀏覽器, 使用slice.javascript

一. 三種數組複製方法
1. by slice
var arr = [1, 2, 3], copyArr;
copyArr = arr.slice();

2. by concat
var arr = [1, 2, 3], copyArr;
copyArr = arr.concat();
3. by loop
var arr = [1, 2, 3], copyArr = [];
for (var i=0, j=arr.length; i
二. 測試環境
瀏覽器: IE6+, FF 3.5.5, Opera 10, Chrome 4.0.249, Safari 4.0.3

三. 測試用例
用上面3種方法, 對一個擁有500000項的數組進行復制操做, 而後對比3種方法所耗掉的時間.
html

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030" /> <title>3種數組複製方法的性能對比</title> <meta name="description" content="數組複製, slice, concat" /> <meta name="keywords" content="數組複製, slice, concat" /> </head> <body> <div class="section"> <p>咱們以一個擁有500000個子項的數組, 做爲測試對象(IE不會崩潰哦!).</p> <button id="J_CopyBySlice">copyBySlice</button> <button id="J_CopyByConcat">copyByConcat</button> <button id="J_CopyByLoop">copyByLoop</button> </div> <script type="text/javascript"> (function() { var arr = []; for (var i=0; i<500000; i++) { arr.push(i); } var get = function(id) { return document.getElementById(id); }; var bySlice = function() { return arr.slice(); }; var byConcat = function() { return arr.concat(); }; var byLoop = function() { var newArr = []; for (var i=0, j=arr.length; i<j; i++) { newArr.push(arr[i]); } return newArr; }; var showResult = function(way, el) { var st = +new Date(), oMsg, newArr; switch (way) { case 'slice': newArr = bySlice(); break; case 'concat': newArr = byConcat(); break; case 'split': newArr = bySplit(); break; case 'loop': newArr = byLoop(); break; } oMsg = document.createElement('p'); oMsg.innerHTML = 'copy by ' + way + ' use time: ' + (+new Date() - st) + 'ms'; el.parentNode.appendChild(oMsg); }; get('J_CopyBySlice').onclick = function() { showResult('slice', this); } get('J_CopyByConcat').onclick = function() { showResult('concat', this); } get('J_CopyByLoop').onclick = function() { showResult('loop', this); } })(); </script> </body> </html>
java

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]web

四. 測試結果(點圖片可查看大圖)

五. 結論
對於IE, 使用slice; 非IE, 使用concat.
對於webkit, 使用concat; 其餘瀏覽器, 使用slice.數組