javascript浅拷贝深拷贝详解

时间：2022-01-12 07:09:37

一、浅拷贝

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

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>
javascript浅拷贝深拷贝详解

从上面的例子，我们修改test2数组的值，最后打印test数组，发现test也跟着改变了。

其实这个就是一个最浅的浅拷贝，相当于test2=test这个阶段是在将test数组中的存储地址索引赋值给test2数组，所以两个数组都是指向同一块存储地址中去。

除了这种方法可以实现浅拷贝，还有使用slice和concat进行浅拷贝

例如：我们测试一次slice这个方法（可从已有的数组中返回选定的元素为新数组）

javascript浅拷贝深拷贝详解
<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>
javascript浅拷贝深拷贝详解

从上面的例子我们可以看出，使用slice方法对数组进行了深度拷贝，

同理，concat的用法如下（用于连接两个或多个数组为新数组)

javascript浅拷贝深拷贝详解
<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>
javascript浅拷贝深拷贝详解

为何这样已经算得上是深拷贝的东西，我又称之为浅拷贝呢？

对于Slice和concat这两个方法来说都是浅拷贝，只能深拷贝数组中的第一层

当数组内为对象时，则是浅拷贝

二、深拷贝

1.通过内置的js函数

javascript浅拷贝深拷贝详解
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
javascript浅拷贝深拷贝详解

这种方式很好理解，对一个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. &lbrack;转&rsqb;javascript console 函数详解 js开发调试的利器

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

  6. javascript 节点属性详解

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

  7. &lpar;&quot&semi; use strict&quot&semi;&rpar;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. swith 好久不用都忘记了

    switch 语句的格式: switch ( 整型或字符型变量 ) { case 变量可能值1 :   分支一; break; case 变量可能值2 :   分支二; break; case 变量可 ...

  2. NGINX下配置404错误页面的方法分享

    NGINX下配置自定义的404页面是可行的,而且很简单,只需如下几步,需要的朋友可以参考下   1. 创建自己的404.html页面 2.更改nginx.conf在http定义区域加入: fastcg ...

  3. &lbrack;ucgui&rsqb; 对话框2——小窗口初始化与消息响应

    >_<" 上一节已经说过,创建过得窗口虽然可见,但是它们是以 “空”的形式出现的.这是因为对话框过程函数尚未包含初始化单个元素的代码.小工具的初始值.由它们所引起的行为以及它们之 ...

  4. BZOJ-1491-社交网络

    题目链接:https://vjudge.net/problem/HYSBZ-1491 题目大意:中文题目,题意见题目 题目分析:由于数据量很小,可以考虑进行Floyd算法. 第一次进行Floyd算法, ...

  5. hdu3065 ac自动机

    病毒侵袭持续中 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Su ...

  6. apktool动态破解apk

    那么今天我们就用另外一种方式来破解apk:动态方式,关于动态方式其实很广义的,因为动态方式相对于静态方式来说,难度大一点,但是他比静态方式高效点,能够针对更过的破解范围.当然动态方式很多,所以这里就分 ...

  7. 解决在VUE中绑定WebSocket事件无法传值的问题

    this.webSocket.onerror =(env)=>{ this.onError(env) }; https://jsfiddle.net/dko6g9a4/1/

  8. Protocol Buffer Basics&colon; C&num;

    Protocol Buffer 基础知识:c#    原文地址:https://developers.google.com/protocol-buffers/docs/csharptutorial   ...

  9. LevelDB Compaction操作

    [LevelDB Compaction操作] 对于LevelDb来说,写入记录操作很简单,删除记录仅仅写入一个删除标记就算完事,但是读取记录比较复杂,需要在内存以及各个层级文件中依照新鲜程度依次查找, ...

  10. POJ2349 Arctic Network 2017-04-13 20&colon;44 40人阅读 评论&lpar;0&rpar; 收藏

    Arctic Network Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 19113   Accepted: 6023 D ...

相关文章