javascript 三種數(shù)組復(fù)制方法的性能對(duì)比

更新時(shí)間：2010年01月25日 22:02:14 作者：

javascript 三種數(shù)組復(fù)制方法的性能對(duì)比,對(duì)于webkit, 使用concat; 其他瀏覽器, 使用slice.

一. 三種數(shù)組復(fù)制方法
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
二. 測(cè)試環(huán)境
瀏覽器: IE6+, FF 3.5.5, Opera 10, Chrome 4.0.249, Safari 4.0.3

三. 測(cè)試用例
用上面3種方法, 對(duì)一個(gè)擁有500000項(xiàng)的數(shù)組進(jìn)行復(fù)制操作, 然后對(duì)比3種方法所耗掉的時(shí)間.

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030" /> <title>3種數(shù)組復(fù)制方法的性能對(duì)比</title> <meta name="description" content="數(shù)組復(fù)制, slice, concat" /> <meta name="keywords" content="數(shù)組復(fù)制, slice, concat" /> </head> <body> <div   id="muxmkzd"   class="section">     <p>我們以一個(gè)擁有500000個(gè)子項(xiàng)的數(shù)組, 作為測(cè)試對(duì)象(IE不會(huì)崩潰哦!).</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>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

四. 測(cè)試結(jié)果(點(diǎn)圖片可查看大圖)