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

更新时间：2010年01月25日 22:02:14 作者：

javascript 三种数组复制方法的性能对比,对于webkit, 使用concat; 其他浏览器, 使用slice.

一. 三种数组复制方法
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.

您可能感兴趣的文章:

JavaScript闭包和回调详解
本文主要讲解了JavaScript闭包和回调,闭包的概念和特性,结合实例分析了使用步骤与方法
2017-08-08
动态添加js事件实现代码
动态添加js事件，主要是不用具体指定位置的事件，这种动态添加事件的方法比较方便，并可以扩展等。
2009-03-03
网页中的图片的处理方法与代码
昨天的一篇图片的alt属性文章评论中的启发，特将网页中的图片的一些处理方法小小的总结一下
2009-11-11
微信小程序实现时间选择
这篇文章主要为大家详细介绍了微信小程序实现时间选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
three.js创造时空裂缝特效实现示例
这篇文章主要为大家介绍了three.js创造时空裂缝特效实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
不同浏览器的怪癖小结
收集不同浏览器的怪癖，对于大家以后的开发与兼容性问题，有所帮助。
2010-07-07
点击进行复制的JS代码实例
这篇文章介绍了点击进行复制的JS代码实例，有需要的朋友可以参考一下
2013-08-08
Bootstrap4 gulp 配置详解
这篇文章主要介绍了Bootstrap4 gulp 配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
js模拟select下拉菜单控件的代码
js模拟select下拉菜单控件的代码，需要的朋友可以参考一下
2013-05-05
D3.js实现散点图和气泡图的方法详解
这篇文章将会给大家介绍了另外两种可视化图表，利用D3.js实现散点图和气泡图，文章通过多个方面介绍的非常详细，下面来一起看看吧。
2016-09-09