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 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
jquery ajax 登录验证实现代码
Sep 23 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 Javascript
基于jQuery拖拽事件的封装
Nov 29 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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
PHP入门速成教程
2007/03/19 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
npm 语义版本控制详解
2019/09/10 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
Python 查找字符在字符串中的位置实例
2018/05/02 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
EJB实例的生命周期
2016/10/28 面试题
优秀党支部事迹材料
2014/01/14 职场文书
伊琍体标语
2014/06/25 职场文书
开发房地产协议书
2014/09/14 职场文书
单位授权委托书范本
2014/09/26 职场文书
导游词之崇武古城
2019/10/07 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
python解析照片拍摄时间进行图片整理
2022/07/23 Python