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鼠标经过不停滑动的问题
Mar 03 Javascript
bootstrap data与jquery .data
Jul 07 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 Javascript
JavaScript实现简单的音乐播放器
Aug 14 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中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
php include和require的区别深入解析
2013/06/17 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
Javascript 对象的解释
2008/11/24 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
python 循环while和for in简单实例
2016/08/16 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
挪威手表购物网站:Klokker
2016/09/19 全球购物
英语翻译系毕业生求职信
2013/09/29 职场文书
八年级美术教学反思
2014/02/02 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
农业生产宣传标语
2014/10/08 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书