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 相关文章推荐
js TextArea的选中区域处理
Dec 28 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
javascript 回调函数详解
Nov 11 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 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递归列出所有文件和目录的代码
2008/09/10 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
js实现继承的5种方式
2015/12/01 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
python使用递归的方式建立二叉树
2019/07/03 Python
python如何将两个txt文件内容合并
2019/10/18 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
python数据类型强制转换实例详解
2020/06/22 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
初中化学教学反思
2014/01/23 职场文书
学生保证书范文
2014/04/28 职场文书
个人作风建设自查报告
2014/10/22 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers