码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2015-04-27 18:38:32      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:

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 三种数组复制方法的性能对比

标签:

原文地址:http://my.oschina.net/soarwilldo/blog/406891

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!