javascript浅拷贝深拷贝详解
一、浅拷贝
浅拷贝在现实中最常见的表现在赋值上面,例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<script type="text/javascript">
//第一个数组
var test=["1","2","3"];
//第二个数组
var test2=[];
test2=test;
test2[1]="two";
console.log(test);//运行的结果是["1","two","3"]
</script>
</body>
</html>
从上面的例子,我们修改test2数组的值,最后打印test数组,发现test也跟着改变了。
其实这个就是一个最浅的浅拷贝,相当于test2=test这个阶段是在将test数组中的存储地址索引赋值给test2数组,所以两个数组都是指向同一块存储地址中去。
除了这种方法可以实现浅拷贝,还有使用slice和concat进行浅拷贝
例如:我们测试一次slice这个方法(可从已有的数组中返回选定的元素为新数组)
<script type="text/javascript">
var arr=["demo1","demo2","demo3"];
var arr2=arr.slice(0);
arr2[1]="test";
console.log(arr);//["demo1","demo2","demo3"]
console.log(arr2);//["demo1","test","demo3"]
</script>
从上面的例子我们可以看出,使用slice方法对数组进行了深度拷贝,
同理,concat的用法如下(用于连接两个或多个数组为新数组)
<script type="text/javascript">
var arr=["demo1","demo2","demo3"];
var arr2=arr.concat();
arr2[1]="test";
console.log(arr);//["demo1","demo2","demo3"]
console.log(arr2);//["demo1","test","demo3"]
</script>
为何这样已经算得上是深拷贝的东西,我又称之为浅拷贝呢?
对于Slice和concat这两个方法来说都是浅拷贝,只能深拷贝数组中的第一层
当数组内为对象时,则是浅拷贝
二、深拷贝
1.通过内置的js函数
function deepCopy(o){
return JSON.parse(JSON.stringify(o));
}
var a = {a:1,b:2,c:3};
var b = deepCopy(a);
b.a = 4;
alert(a.a); //1
alert(b.a); //4,将b.a赋值为4,不会影响到a对象,a.a仍是1
这种方式很好理解,对一个Object对象而言,
先使用内置的JSON.stringify()函数,将其转化为字符串 "{"a":1,"b":2}"
此时生成的字符串已经和原对象没有任何联系了,再通过JSON.parse()函数,将生成的字符串转化为一个新的对象。 {a: 1, b: 2}
而在新对象上的操作与旧对象是完全独立的,不会相互影响。这种方法的优点就是简单易懂,使用js内置函数来实现,不需要太大的开销。
2.以通过自己的方法实现,就是遍历数组或对象,返回新数组或者对象。
var simpleCopy = function(o){
if (o instanceof Array) {
var n = [];
for (var i = ; i < o.length; ++i) {
n[i] = o[i];
}
return n;
} else if (o instanceof Object) {
var n = {}
for (var i in o) {
n[i] = o[i];
}
return n;
}
}
3.如何实现拷贝包含对象或者数组的这种情况呢?那么就通过递归拷贝来实现。
var deepCopy = function(o) {
if (o instanceof Array) {
var n = [];
for (var i = ; i < o.length; ++i) {
n[i] = deepCopy(o[i]);
}
return n; } else if (o instanceof Object) {
var n = {}
for (var i in o) {
n[i] = deepCopy(o[i]);
}
return n;
} else {
return o;
}
}
javascript浅拷贝深拷贝详解的更多相关文章
- js对象浅拷贝和深拷贝详解
js对象浅拷贝和深拷贝详解 作者:i10630226 字体:[增加 减小] 类型:转载 时间:2016-09-05我要评论 这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具 ...
- java 深拷贝与浅拷贝机制详解
概要: 在Java中,拷贝分为深拷贝和浅拷贝两种.java在公共超类Object中实现了一种叫做clone的方法,这种方法clone出来的新对象为浅拷贝,而通过自己定义的clone方法为深拷贝. (一 ...
- 从mixin到new和prototype:Javascript原型机制详解
从mixin到new和prototype:Javascript原型机制详解 这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客 继承是为了实现方法的复用 ...
- JavaScript严格模式详解
转载自阮一峰的博客 Javascript 严格模式详解 作者: 阮一峰 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict m ...
- [转]javascript console 函数详解 js开发调试的利器
javascript console 函数详解 js开发调试的利器 分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...
- javascript 节点属性详解
javascript 节点属性详解 根据 DOM,html 文档中的每个成分都是一个节点 DOM 是这样规定的:整个文档是一个文档节点每个 html 标签是一个元素节点包含在于 html 元素中的文本 ...
- (" use strict")Javascript 严格模式详解
Javascript 严格模式详解 转载别人的博客内容,浏览了一遍,没有全部吸收,先保存一下链接 http://www.ruanyifeng.com/blog/2013/01/javascript_s ...
- 【HANA系列】SAP HANA XS使用JavaScript数据交互详解
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Jav ...
- JavaScript运行机制详解
JavaScript运行机制详解 var test = function(){ alert("test"); } var test2 = function(){ alert(& ...
随机推荐
- nohup和&后台运行,进程查看及终止
1.nohup 用途:不挂断地运行命令. 语法:nohup Command [ Arg … ] [ & ] 无论是否将 nohup 命令的输出重定向到终端,输出都将附加到当前目录的 nohup ...
- buildbot环境搭建—master篇
好久没写博客来,最近没有深入研究东西,所以写不出什么特别有技术含量的东西,但是,每周出产博客的习惯不能荒废掉,所以就写一下,这个星期学习的简单到东西. 关于buildbot,它是基于python的一个 ...
- Java 动态字节码技术
对 Debug 的好奇 初学 Java 时,我对 IDEA 的 Debug 非常好奇,不止是它能查看断点的上下文环境,更神奇的是我可以在断点处使用它的 Evaluate 功能直接执行某些命令,进行一些 ...
- js 大厦之JavaScript事件
1.js事件简介 事件(Event) 是 JavaScript 应用跳动的心脏 ,进行交互,使网页动起来.也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了 ...
- Java的BIO,NIO和AIO的区别于演进
作者:公众号:我是攻城师 前言 Java里面的IO模型种类较多,主要包括BIO,NIO和AIO,每个IO模型都有不一样的地方,那么这些IO模型是如何演变呢,底层的原理又是怎样的呢? 本文我们就来聊聊. ...
- Javascript高级编程学习笔记(51)—— DOM2和DOM3(3)操作样式表
操作样式表 在JS中样式表用一种类型来表示,以便我们在JS对其进行操作 这一类型就是CSSStyleSheet 即CSS样式表类型,包括了之前 style 对象所不包括的外部样式表以及嵌入样式表 其中 ...
- Python 22端口发邮件
#!/usr/bin/python#-*-coding:UTF-8-*- import smtplibimport timeimport os from email.mime.text import ...
- SpringBoot整合Mybatis完整版
喜欢的朋友可以关注下,粉丝也缺. 自从Spring推出Boot,Cloud系列之后,一度成为热门的框架,现在大部分的招聘要求都要有相关的开发经验,借此我在这里就给大家分享一下如何玩转SpringBoo ...
- [原创]K8Cscan插件之多种方式系统版本探测
[原创]K8 Cscan 大型内网渗透自定义扫描器 https://www.cnblogs.com/k8gege/p/10519321.html Cscan简介:何为自定义扫描器?其实也是插件化,但C ...
- Ocelot简易教程(七)之配置文件数据库存储插件源码解析
作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9852711.html 上篇文章给大家分享了如何集成我写的一个Ocelot扩展插件把Ocelot的配置存储 ...