一、浅拷贝

浅拷贝在现实中最常见的表现在赋值上面,例如

<!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数组,所以两个数组都是指向同一块存储地址中去。

除了这种方法可以实现浅拷贝,还有使用sliceconcat进行浅拷贝

例如:我们测试一次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浅拷贝深拷贝详解的更多相关文章

  1. js对象浅拷贝和深拷贝详解

    js对象浅拷贝和深拷贝详解 作者:i10630226 字体:[增加 减小] 类型:转载 时间:2016-09-05我要评论 这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具 ...

  2. java 深拷贝与浅拷贝机制详解

    概要: 在Java中,拷贝分为深拷贝和浅拷贝两种.java在公共超类Object中实现了一种叫做clone的方法,这种方法clone出来的新对象为浅拷贝,而通过自己定义的clone方法为深拷贝. (一 ...

  3. 从mixin到new和prototype:Javascript原型机制详解

    从mixin到new和prototype:Javascript原型机制详解   这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客 继承是为了实现方法的复用 ...

  4. JavaScript严格模式详解

    转载自阮一峰的博客 Javascript 严格模式详解   作者: 阮一峰 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict m ...

  5. [转]javascript console 函数详解 js开发调试的利器

    javascript console 函数详解 js开发调试的利器   分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...

  6. javascript 节点属性详解

    javascript 节点属性详解 根据 DOM,html 文档中的每个成分都是一个节点 DOM 是这样规定的:整个文档是一个文档节点每个 html 标签是一个元素节点包含在于 html 元素中的文本 ...

  7. (" use strict")Javascript 严格模式详解

    Javascript 严格模式详解 转载别人的博客内容,浏览了一遍,没有全部吸收,先保存一下链接 http://www.ruanyifeng.com/blog/2013/01/javascript_s ...

  8. 【HANA系列】SAP HANA XS使用JavaScript数据交互详解

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Jav ...

  9. JavaScript运行机制详解

    JavaScript运行机制详解   var test = function(){ alert("test"); } var test2 = function(){ alert(& ...

随机推荐

  1. 背水一战 Windows 10 (104) - 通知(Toast): 纯文本 toast, 短时 toast, 长时 toast, 图文 toast

    [源码下载] 背水一战 Windows 10 (104) - 通知(Toast): 纯文本 toast, 短时 toast, 长时 toast, 图文 toast 作者:webabcd 介绍背水一战 ...

  2. Akka-CQRS(2)- 安装部署cassandra cluster,ubuntu-16.04.1-LTS and MacOS mojave

    对于akka-cluster这样的分布式软件系统来说,选择配套的数据库类型也是比较讲究的,最好也是分布式的,如cassandra,能保证良好的HA特性.前面的例子里示范akka-persistence ...

  3. java,让debug出色

    虽然我们不喜欢bug,但是bug永远都存在.虽然我们牛逼,但是仍然有不知道的东西,解决不了的问题.so,还得借助工具,让咱效率提起来扛扛的.解决的问题如是:由于某种原因,其他系统发送的mq,我这边说没 ...

  4. 网管到CEO的10年逆袭之路

    把我个人近一年来讲的技术人员如何成长的鸡汤课整理了出来,送给大家<网管到CEO的10年逆袭之路>

  5. 【面试题】java中高以上必会技能

    java基础 1.集合相关 1.1 java中常见的集合 答:Arraylist,LinkedList,ListedList,HashMap,HashSet. 1.2 arraylist和linked ...

  6. HBase相关的一些点

    1.在运行Hbase时,如果遇到出错之后: 可以通过{HBASE_HOME}目录,我的是在/usr/soft/hbase下的logs子目录中的日志文件查看错误原因.2.启动关闭Hadoop和HBase ...

  7. centos上ftp服务器的简易安装部署

    申明:本示例为centos7 开启ftp服务命令为:systemctl start vsftpd 关闭防火墙命令为systemctl stop firewalld 7版本以下开启ftp服务器为 ser ...

  8. iOS学习——更改导航栏的返回按钮的标题与颜色

    转载自:修改navigationController返回按钮颜色和文字 今天在做项目时遇到这个问题,试了很多方法都失败了.最后终于找到正确的方案了,在这里分享给大家. 引言 在iOS开发过程中,Nav ...

  9. [P5172] Sum

    "类欧几里得算法"第一题 sum [题意] 给入\(n,r\),求\(\sum_{d=1}^n(-1)^{\lfloor d\sqrt r \rfloor}\). [分析] 只需要 ...

  10. Python3 模块 -- Fabric自动化模版

    安装 pip3 install fabric3 创建软连接 find / -type f -name "fab" /usr/local/python3/bin/fab ln -s ...