信鸽网

javascript 三种数组复制方法的性能对比

  作者：bea

一. 三种数组复制方法 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+, 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 二. 测试环境 浏览器: IE6+, FF 3.5.5, Opera 10, Chrome 4.0.249, Safari 4.0.3 三. 测试用例 用上面3种方法, 对一个拥有500000项的数组进行复制操作, 然后对比3种方法所耗掉的时间.


<!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>




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


四. 测试结果(点图片可查看大图)

五. 结论


对于IE, 使用slice; 非IE, 使用concat.

对于webkit, 使用concat; 其他浏览器, 使用slice.



有用  |  无用

猜你喜欢

您可能感兴趣的文章: