JavaScript 数组复制性能对比：slice、concat 与循环
本文对比了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需再刷新一下页面才能执行]
测试结果与结论
四、测试结果（点击图片可查看大图）
五、结论
对于webkit内核浏览器，推荐使用concat方法；其他浏览器，建议使用slice方法。
JS 鼠标滚轮事件频繁触发导致卡顿怎么优化？
2026-11-05 17:08:07
优化JS回到顶部性能：防抖节流与requestAnimationFrame应用
2026-11-05 16:33:51
JS中Array、Set与Map的区别及应用场景选择
2026-11-05 16:03:02
PixiJS 常见报错排查：纹理跨域、黑屏与内存泄漏解决
2026-11-05 10:05:21
JS数组find与filter取值区别及性能对比
2026-11-05 08:39:21
相关标签：