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 TextArea动态显示剩余字符
Oct 22 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 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
无线电广播的开始
2002/01/30 无线电
laravel学习教程之存取器
2016/07/30 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
js每次Title显示不同的名言
2008/09/25 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
百度地图api如何使用
2015/08/03 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
python提取页面内url列表的方法
2015/05/25 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
Python绘制热力图示例
2019/09/27 Python
python实现横向拼接图片
2020/03/23 Python
Python中bisect的用法及示例详解
2020/07/20 Python
干部鉴定材料
2014/05/18 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
迎国庆演讲稿
2014/09/05 职场文书
共青团员自我评价范文
2014/09/14 职场文书
党员思想汇报材料
2014/12/19 职场文书
大一学生个人总结
2015/02/15 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang