js 数组克隆方法 小结


Posted in Javascript onMarch 20, 2010

因此如果要创建一个与已经存在的对象内容相同的对象,不能通过简单的赋值操作。这样说的可能还是不太明白。

看下面的例子:

var a=[1,2,3,4]; var b=a;c=b; a.pop(); //移除最后一个元素 alert(b); //弹出1,2,3 alert(c); //弹出1,2,3 
var a=[1,2,3,4]; var b=a;c=b; a.pop(); //移除最后一个元素 alert(b); //弹出1,2,3 alert(c); //弹出1,2,3

我们执行上面的代码发现,在a的内容做改变后,变量b和c的结果也改变了。

上面的情况也许不是我们所需要的,我们希望的是创建一个与原对象内容一样的“新”对象。这样我们就需要通过一些克隆的办法来实现。

JS里Array也是一种Object。这里我们主要总结一下Array的克隆方式,我们这里为Array原生对象扩展一个clone方法。

1、最简单的办法,就是创建一个新数组,并遍历数组逐项添加到新数组中。

Array.prototype.clone=function(){ var a=[]; for(var i=0,l=this.length;i<l;i++) a.push(this[i]); return a; } 
Array.prototype.clone=function(){ var a=[]; for(var i=0,l=this.length;i<l;i++) a.push(this[i]); return a; }

这种实现方式是最容易想到也是最容易理解的,但是代码有点复杂了,我们仔细研究Array的一些方法,其实还有一个很简单的办法。下面说一下其它的两种办法。

2、通过Array对象的slice方法。

slice方法是通过参数start和end的传入值来返回数组中的一段,该方法不对原数组进行操作。我们通过slice(0)可以使其返回所有项。

Array.prototype.clone=function(){ return this.slice(0); } 
Array.prototype.clone=function(){ return this.slice(0); }

3、通过Array对象的concat方法。
concat方法是用来实现数组的合并的。通过和一个空函数的合并,即可实现我们的克隆功能。
Array.prototype.clone=function(){ return [].concat(this); } //或者 Array.prototype.clone=function(){ return this.concat(); } 
Array.prototype.clone=function(){ return [].concat(this); } //或者 Array.prototype.clone=function(){ return this.concat(); }

如果发挥想象应该还有其它的办法,以上只是本人想到的两种方法。

JavaScript 克隆数组最简单的方法

JavaScript数组的快速克隆(slice()函数)和数组的排序、乱序和搜索(sort()函数)

Javascript 相关文章推荐
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
vs2003 js文件编码问题的解决方法
Mar 20 #Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 #Javascript
JavaScript 对象的属性和方法4种不同的类型
Mar 19 #Javascript
jQuery 前的按键判断代码
Mar 19 #Javascript
Javascript 匿名函数及其代码模式原理
Mar 19 #Javascript
JS 有名函数表达式全面解析
Mar 19 #Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 #Javascript
You might like
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
vc6编写python扩展的方法分享
2014/01/17 Python
python实现逆波兰计算表达式实例详解
2015/05/06 Python
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
介绍下Lucene建立索引的过程
2016/03/02 面试题
高分子材料与工程专业个人求职信
2013/12/15 职场文书
《木笛》教学反思
2014/03/01 职场文书
成都人事代理协议书
2014/10/25 职场文书
2014年团委工作总结
2014/11/13 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
贷款工作证明模板
2015/06/12 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python
python前后端自定义分页器
2022/04/13 Python