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

2020-05-12 我要评论

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

相关文章

猜您喜欢

今日热门