JavaScript 数组复制性能对比:slice、concat 与循环

作者:寒星

时间:2026-10-24

浏览:73

本文对比了JavaScript中三种数组复制方法:slice、concat和循环。通过50万项数组的测试,发现WebKit内核浏览器中concat性能更优,而IE及其他非WebKit浏览器中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 < j; i++) { copyArr[i] = arr[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>  </body> </html> 

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]



测试结果与结论

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


三种数组复制方法及测试环境

五、结论


对于IE浏览器,使用slice方法;非IE浏览器,使用concat方法。

对于webkit内核浏览器,推荐使用concat方法;其他浏览器,建议使用slice方法。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章