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 相关文章推荐
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
JS重要知识点小结
Nov 06 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
js实现每日签到功能
Nov 29 Javascript
JS实现音量控制拖动
Jan 15 Javascript
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
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
对比分析json及XML
2014/11/28 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
Python定时器实例代码
2017/11/01 Python
Python发展简史 Python来历
2019/05/14 Python
Python接收手机短信的代码整理
2020/08/02 Python
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
经管应届生求职信
2013/11/17 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
学生鉴定评语大全
2014/05/05 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
python OpenCV学习笔记
2021/03/31 Python
python处理json数据文件
2022/04/11 Python