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 相关文章推荐
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
Vue自定义指令详解
Jul 28 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 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获取远程图片体积大小的实例
2013/11/12 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
Python编程实现的图片识别功能示例
2017/08/03 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
python的数学算法函数及公式用法
2020/11/18 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
软件测试工程师结构化面试题库
2016/11/23 面试题
高分子材料个人求职信范文
2013/09/25 职场文书
社团文化节邀请函
2014/01/10 职场文书
保健品市场营销方案
2014/03/31 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
政府个人对照检查材料
2014/08/28 职场文书
参观邀请函范文
2015/02/02 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL