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 相关文章推荐
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
js实现幻灯片轮播图
Aug 14 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
Terran剧情介绍
2020/03/14 星际争霸
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
jQuery表单域选择器用法分析
2015/02/10 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
Node.js实现文件上传
2016/07/05 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
Django发送html邮件的方法
2015/05/26 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
Python删除n行后的其他行方法
2019/01/28 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
生日宴会答谢词
2014/01/09 职场文书
面试后的感谢信范文
2014/02/01 职场文书
幼儿园中秋节活动方案
2014/02/06 职场文书
融资租赁计划书
2014/04/29 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
2014年终工作总结范本
2014/12/15 职场文书
观后感的写法
2015/06/19 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS