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循环map功能的代码
Feb 26 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
react+redux的升级版todoList的实现
Dec 18 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 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
PHP 多进程 解决难题
2009/06/22 PHP
PHP 函数执行效率的小比较
2010/10/17 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
js取得url地址参数实例
2013/02/22 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
vue二级路由设置方法
2018/02/09 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
应届生服装设计自我评价
2013/09/20 职场文书
计算机专业应届毕业生自荐信
2013/09/26 职场文书
护理专业毕业生自我鉴定
2013/10/08 职场文书
临床医师个人自我评价
2014/04/06 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书