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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 三种数组复制方法的性能对比

Javascript: jQuery Selectors(选择器)的使用(七、子元素篇); jquery 事件执行检测代码; javascript 支持页码格式的分页类; javascript tabIndex属性; jquery tablesorter.js 支持中文表格排序改进; javascript 返回数组中不重复的元素; javascript 文字上下间隔滚动的代码符合WEB标准脚本之家修正版; jQuery 开天辟地入门篇一; jMessageBox 基于jQuery的窗口插件; 用javascript获取当页面上鼠标光标位置和触发事件的对象的代码; javascript实现的textarea运行框效果代码不用指定id批量指定; 测试你的JS的掌握程度的代码; js 与或运算符 || && 妙用; 模仿JQuery.extend函数扩展自己对象的js代码; json 介绍 js简单实例; Ext.MessageBox工具类简介; ASP小贴士/ASP Tips javascript tips可以当桌面; 勾选时激活input 否则禁用的javascript代码; javascript 输入文本框时的友好提示; jValidate 基于jQuery的表单验证插件

No. « ‹ 247 248 249 250 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 85 ::

收藏到网摘: n/a

javascript下一种表单元素获取方法存在的问题 js 多层叠的TAB选项卡

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"> 我们以一个拥有500000个子项的数组, 作为测试对象(IE不会崩溃哦!). <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 全选提示:你可先修改部分代码,再按运行]

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

五. 结论
~~对于IE, 使用slice; 非IE, 使用concat.~~
对于webkit, 使用concat; 其他浏览器, 使用slice.

javascript下一种表单元素获取方法存在的问题 js 多层叠的TAB选项卡

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

评论 (0) All