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如何把参数列严格转换成数组实现思路
Apr 01 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
Vue底层实现原理总结
Feb 17 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
vue input标签通用指令校验的实现
Nov 05 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面试题集锦
2012/03/08 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
有趣的javascript数组定义方法
2010/09/10 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
javascript连续赋值问题
2015/07/08 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
python利用datetime模块计算时间差
2015/08/04 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
详解python深浅拷贝区别
2019/06/24 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
基于Django统计博客文章阅读量
2019/10/29 Python
为什么称python为胶水语言
2020/06/16 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
公务员试用期满考核材料
2014/05/22 职场文书
学校交通安全责任书
2014/08/25 职场文书
医德医风自我评价2015
2015/03/03 职场文书
婚宴父亲致辞
2015/07/27 职场文书
婚宴来宾致辞
2015/07/28 职场文书
公司老总年会致辞
2015/07/30 职场文书
基于Python编写一个监控CPU的应用系统
2022/06/25 Python