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 中的 &amp;&amp; 和 || 使用小结
Apr 25 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
jQuery+ajax实现用户登录验证
Sep 13 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
使用PHP模拟HTTP认证
2006/10/09 PHP
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
详解js中==与===的区别
2017/01/08 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
Python交换变量
2008/09/06 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
PyTorch基本数据类型(一)
2019/05/22 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
酒店应聘自荐信
2013/11/09 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
2015年老干部工作总结
2015/04/23 职场文书
小学生教师节广播稿
2015/08/19 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis