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 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
vue组件间通信解析
Mar 01 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
JavaScript定时器使用方法详解
Mar 26 Javascript
Python版实现微信公众号扫码登陆
May 28 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 include和require的区别深入解析
2013/06/17 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
2016/06/12 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
vue中如何使用ztree
2018/02/06 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
Python 变量类型及命名规则介绍
2013/06/08 Python
python实现udp数据报传输的方法
2014/09/26 Python
Python实时获取cmd的输出
2015/12/13 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
超市总经理岗位职责
2014/02/02 职场文书
遗嘱继承公证书
2014/04/09 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
记账会计岗位职责
2014/06/16 职场文书
党员志愿者活动总结
2014/06/26 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android