JavaScript数组深拷贝和浅拷贝的两种方法


Posted in Javascript onApril 16, 2014

例如这个例子:

var arr = ["One","Two","Three"];var arrto = arr;
arrto[1] = "test";
document.writeln("数组的原始值:" + arr + "<br />");//Export:数组的原始值:One,test,Three
document.writeln("数组的新值:" + arrto + "<br />");//Export:数组的新值:One,test,Three

像上面的这种直接赋值的方式就是浅拷贝,很多时候,这样并不是我们想要得到的结果,其实我们想要的是arr的值不变,不是吗?

方法一:js的slice函数

对于array对象的slice函数, 
返回一个数组的一段。(仍为数组) 
arrayObj.slice(start, [end])  
参数 
arrayObj  
必选项。一个 Array 对象。  
start  
必选项。arrayObj 中所指定的部分的开始元素是从零开始计算的下标。  
end  
可选项。arrayObj 中所指定的部分的结束元素是从零开始计算的下标。  
说明 
slice 方法返回一个 Array 对象,其中包含了 arrayObj 的指定部分。 
slice 方法一直复制到 end 所指定的元素,但是不包括该元素。如果 start 为负,将它作为 length + start处理,此处 length 为数组的长度。如果 end 为负,就将它作为 length + end 处理,此处 length 为数组的长度。如果省略 end ,那么 slice 方法将一直复制到 arrayObj 的结尾。如果 end 出现在 start 之前,不复制任何元素到新数组中。

例子:
var arr = ["One","Two","Three"];var arrtoo = arr.slice(0);
arrtoo[1] = "set Map";
document.writeln("数组的原始值:" + arr + "<br />");//Export:数组的原始值:One,Two,Three
document.writeln("数组的新值:" + arrtoo + "<br />");//Export:数组的新值:One,set Map,Three

方法二:js的concat方法

concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
语法
arrayObject.concat(arrayX,arrayX,......,arrayX)
说明
返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。
var arr = ["One","Two","Three"];

例子:
   
var arrtooo = arr.concat();
arrtooo[1] = "set Map To";
document.writeln("数组的原始值:" + arr + "<br />");//Export:数组的原始值:One,Two,Three
document.writeln("数组的新值:" + arrtooo + "<br />");//Export:数组的新值:One,set Map To,Three
Javascript 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
Easyui和zTree两种方式分别实现树形下拉框
Aug 04 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
详解jQuery中的prop()使用方法
Jan 05 jQuery
JavaScript两种跨域技术全面介绍
Apr 16 #Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 #Javascript
JavaScript框架(iframe)操作总结
Apr 16 #Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 #Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 #Javascript
JavaScript面向对象编程入门教程
Apr 16 #Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 #Javascript
You might like
怎样在php中使用PDF文档功能
2006/10/09 PHP
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
Jquery 常用方法经典总结
2010/01/28 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
js格式化时间小结
2014/11/03 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
python开发之函数定义实例分析
2015/11/12 Python
基于python 字符编码的理解
2017/09/02 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
中东奢侈品市场:Coveti
2019/05/12 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
工艺工程师工作职责
2013/11/23 职场文书
学校安全检查制度
2014/01/27 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书