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 相关文章推荐
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
javascript 进度条 实现代码
Jul 30 Javascript
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
Node.js API详解之 repl模块用法实例分析
May 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
一个简洁的多级别论坛
2006/10/09 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
Django学习笔记之ORM基础教程
2018/03/27 Python
python 文件转成16进制数组的实例
2018/07/09 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
浅谈python出错时traceback的解读
2020/07/15 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
环保建议书500字
2014/05/14 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
英文自荐信范文
2015/03/25 职场文书
2015年度保密工作总结
2015/04/24 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL