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来实现可以输入值的下拉选单 雏型
Dec 06 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 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
简单的php 验证图片生成函数
2009/05/21 PHP
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
PHP编码转换
2012/11/05 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
javascript 随机展示头像实现代码
2011/12/06 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
Python中的魔法方法深入理解
2014/07/09 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
pandas 对group进行聚合的例子
2019/12/27 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
html5启动原生APP总结
2020/07/03 HTML / CSS
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
增员口号大全
2014/06/18 职场文书
代办社保委托书范文
2014/10/06 职场文书
公务员考察材料范文
2014/12/23 职场文书
环保证明
2015/06/23 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
基于Redission的分布式锁实战
2022/08/14 Redis