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 相关文章推荐
!DOCTYPE声明对JavaScript的影响分析
Apr 12 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
用Javascript实现Sleep暂停功能代码
Sep 03 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
node使用promise替代回调函数
May 07 Javascript
vue基础知识--axios合并请求和slot
Jun 04 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
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实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
详解vue 命名视图
2019/08/14 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
python友情链接检查方法
2015/07/08 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
python游戏地图最短路径求解
2019/01/16 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
python中添加模块导入路径的方法
2021/02/03 Python
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
本科生求职简历的自我评价
2013/10/21 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
商业街策划方案
2014/05/31 职场文书
员工评语范文
2014/12/31 职场文书
担保书怎么写 ?
2019/04/22 职场文书