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的变量值传递给ASP变量
Dec 10 Javascript
js获取多个tagname的节点数组
Sep 22 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
js判断两个数组相等的5种方法
May 06 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 PDO中文乱码解决办法
2009/07/20 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
php 基础函数
2017/02/10 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
python3实现绘制二维点图
2019/12/04 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
Python sep参数使用方法详解
2020/02/12 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
python switch 实现多分支选择功能
2020/12/21 Python
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
学校文明单位申报材料
2014/05/06 职场文书
校园绿化美化方案
2014/06/08 职场文书
大学生工作求职信
2014/06/23 职场文书
个人优缺点总结
2015/02/28 职场文书
2015年工会工作总结
2015/03/30 职场文书
安全教育日主题班会
2015/08/13 职场文书