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+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
vue实现简单跑马灯效果
May 25 Javascript
jQuery实现简单QQ聊天框
Aug 27 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递归算法和应用方法介绍
2013/04/15 PHP
浅析php创建者模式
2014/11/25 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
JavaScript window.location对象
2014/11/14 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
写了个监控nginx进程的Python脚本
2012/05/10 Python
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
python中退出多层循环的方法
2018/11/27 Python
python的继承知识点总结
2018/12/10 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
python数据爬下来保存的位置
2020/02/17 Python
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
运动会解说词200字
2014/02/06 职场文书
环保建议书400字
2014/05/14 职场文书
党员群众路线承诺书
2014/05/20 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python