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 相关文章推荐
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
element tree树形组件回显数据问题解决
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全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
JavaScript中变量提升与函数提升经典实例分析
2018/07/26 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
python 查找字符串是否存在实例详解
2017/01/20 Python
Django日志模块logging的配置详解
2017/02/14 Python
Python 基础教程之str和repr的详解
2017/08/20 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
教师节作文之小学四年级
2019/09/03 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL