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 相关文章推荐
JSON 编辑器实现代码
Dec 06 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
Layui 动态禁止select下拉的例子
Sep 03 Javascript
vue实现简单数据双向绑定
Apr 28 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获取程序执行的时间
2013/06/09 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
jquery select下拉框操作的一些说明
2010/04/02 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
python实现每次处理一个字符的三种方法
2014/10/09 Python
浅谈MySQL中的触发器
2015/05/05 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
浅谈django 重载str 方法
2020/05/19 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
pandas按条件筛选数据的实现
2021/02/20 Python
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
美发店5.1活动方案
2014/01/24 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
大型会议策划方案
2014/05/17 职场文书
明星员工获奖感言
2014/08/14 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
详解JVM系列之内存模型
2021/06/10 Javascript
分享一些Java的常用工具
2021/06/11 Java/Android
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS