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 相关文章推荐
JQuery 技巧和窍门整理(8个)
Apr 22 Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
js实现常用排序算法
Aug 09 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
React优化子组件render的使用
May 12 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
Vue实现手机计算器
Aug 17 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 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
如何将数据从文本导入到mysql
2006/10/09 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
python自定义解析简单xml格式文件的方法
2015/05/11 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
python如何读写csv数据
2018/03/21 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
html5开发之viewport使用
2013/10/17 HTML / CSS
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
最新党员的自我评价分享
2013/11/04 职场文书
学前教育毕业生自荐信范文
2013/12/24 职场文书
美德好少年事迹材料
2014/01/19 职场文书
2014小学植树节活动总结
2014/03/10 职场文书
2014年创卫工作总结
2014/11/24 职场文书
小学家长意见怎么写
2015/06/03 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
Matlab如何实现矩阵复制扩充
2021/06/02 Python