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 相关文章推荐
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
python 使用get_argument获取url query参数
2017/04/28 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
深入理解Python 多线程
2020/06/16 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
门卫岗位职责
2013/11/15 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
档案信息化建设方案
2014/05/16 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
期末考试复习计划
2015/01/19 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
北京导游词
2015/02/12 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python