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实现的表格分页实现代码
Jun 21 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
JavaScript 是什么意思
Sep 22 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
Vue与React的区别和优势对比
Dec 18 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_MySQL教程-第一天
2007/03/18 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
jQuery使用手册之一
2007/03/24 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
python实现ip地址的包含关系判断
2020/02/07 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
综合素质的自我鉴定
2013/10/07 职场文书
军训自我鉴定
2013/12/14 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
调解协议书
2014/04/16 职场文书
2016教师国培研修感言
2015/12/08 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL