在使用JavaScript对数组进行操作的时候，我们经常需要将数组进行备份，事实证明如果只是简单的将它赋予其他变量，那么我们只要更改其中的任何一个，然后其他的也会跟着改变，这就导致了问题的发生。

参考Object.assign()：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

<!DOCTYPE html>

<html>

<head>

    <title>测试深拷贝，浅拷贝方法及现象</title>

</head>

<body>

    <script type="text/javascript">

        //Object.assign()方法是浅拷贝

        var myobject={

            a:"a",

            b:"b",

            c:"c",

        }

        var newobject=Object.assign({},myobject);

        newobject.a=222;

        document.writeln("原始："+JSON.stringify(myobject));

        document.writeln("现在："+JSON.stringify(newobject));

                function test() {

          'use strict';

          let obj1 = { a: 0 , b: { c: 0}};

          let obj2 = Object.assign({}, obj1);

          console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

          obj1.a = 1;

          console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}

          console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

          obj2.a = 2;

          console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}

          console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}

          obj2.b.c = 3;

          console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}

          console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}

          // Deep Clone

          //利用json方法是深复制，但要JSON安全

          obj1 = { a: 0 , b: { c: 0}};

          let obj3 = JSON.parse(JSON.stringify(obj1));

          obj1.a = 4;

          obj1.b.c = 4;

          console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}

        }

        test();

    </script>

<!--     <script type="text/javascript">

        //这是浅拷贝，该变拷贝的对象会改变原始对象的值

        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

    </script>

 -->

<!--      <script type="text/javascript">

    //这是深拷贝，该变现有对象不会改变原始对象的值

    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

     </script> -->

<!--      <script type="text/javascript">

    //这是深拷贝

         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

     </script> -->

<!--      <script type="text/javascript">

    //深拷贝，json方法是深拷贝

         var someobj={

             a:"a",

             b:"b",

             c:"c"

         }

         var newobject=JSON.parse(JSON.stringify(someobj));

         someobj.a="aaaa";

         document.writeln("原始："+JSON.stringify(someobj)+"<br/>");

         document.writeln("现在："+JSON.stringify(newobject)+"<br/>");

         //原始：{"a":"aaaa","b":"b","c":"c"}

        // 现在：{"a":"a","b":"b","c":"c"}

     </script> -->

 </body>

</html>

这里只是浅尝辄止，以后还会继续探究。

总结：浅拷贝Object.assign()，

　　    深拷贝用JSON.parse(JSON.stringify(someobj));(缺点：只能拷贝纯json的，不能拷贝包含函数的对象)

　　　但要保证someobj是json安全的，符合json规则。

浅拷贝的影响，要用深拷贝的地方：如一个表格，点击一行进行编辑，当弹出框中input输入框值变化，表格数据也会跟着变化。事实上，我们要的是，只有提交了，重新刷新，表格这个数据才会变化。

深拷贝与浅拷贝js，方法的更多相关文章

  1. 聊一聊深拷贝和浅拷贝(JS)

    在 JS 中数据类型分为值类型和引用类型,对于值类型,变量中存放的是具体的值,而对于引用类型,变量中存放的是地址. 对于值类型: const a = 3; let b = a; b = 4; cons ...

  2. JS实现深拷贝，浅拷贝的方法

    在 JS 中,函数和对象都是浅拷贝(地址引用):其他的,例如布尔值.数字等基础数据类型都是深拷贝(值引用). 深拷贝 JSON.parse(JSON.stringify(src)):这种方法有局限性, ...

  3. js的命名空间 && 单体模式 && 变量深拷贝和浅拷贝 && 页面弹窗设计

    说在前面:这是我近期开发或者看书遇到的一些点,觉得还是蛮重要的. 一.为你的 JavaScript 对象提供命名空间 <!DOCTYPE html> <html> <he ...

  4. 从JS的深拷贝与浅拷贝到jq的$.extend()方法

    一.堆内存与栈内存 堆和栈都是内存中划分出来的用来存储的区域,栈为自动分配的内存空间,它由系统自动释放,堆为动态分配的内存,大小不定也不会自动释放. 二.js基本数据类型与引用类型的不同 基本数据类型 ...

  5. js引用类型深拷贝、浅拷贝方法封装

    引用类型的深拷贝.浅拷贝在前端领域一直是个很重要的知识点,不仅在业务中频繁使用,也是面试官们喜欢考的的知识点之一.本篇将封装引用类型的深拷贝.浅拷贝方法,并解决在封装过程中出现的问题. 一.浅拷贝 浅 ...

  6. js 深拷贝和浅拷贝

    js 深拷贝和浅拷贝 先举一下项目中遇到的两个例子: 例子1: var json = $.parseJSON(data.data);//data.data是接口返回的值var a = json.cha ...

  7. JS 数据类型、赋值、深拷贝和浅拷贝

    js 数据类型 六种 基本数据类型: Boolean. 布尔值,true 和 false. null. 一个表明 null 值的特殊关键字. JavaScript 是大小写敏感的,因此 null 与 ...

  8. js 中引用类型 的深拷贝 和 浅拷贝的区别

    一.曾经在读JQ源码的时候,对深拷贝算是有了一点的理解.我们在项目中是不是经常会遇到这样的问题呢? 后台返回一个数组对象(引用类型).次数在页面渲染中需要对部分数据进行处理 比如:银行卡6234509 ...

  9. 在vue中子组件修改props引发的对js深拷贝和浅拷贝的思考

    不管是react还是vue,父级组件与子组件的通信都是通过props来实现的,在vue中父组件的props遵循的是单向数据流,用官方的话说就是,父级的props的更新会向下流动到子组件中,反之则不行. ...

随机推荐

  1. &lt;LeetCode OJ&gt; 217./219. Contains Duplicate (I / II)

    Given an array of integers, find if the array contains any duplicates. Your function should return t ...

  2. hdu 1147:Pick-up sticks（基本题，判断两线段相交）

    Pick-up sticks Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  3. hdu 2809(状压dp）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2809 思路:简单的状压dp,看代码会更明白. #include<iostream> #in ...

  4. Java Print 打印

    Java 原生的API中有Print,使用Print可以操作打印机进行打印操作,获取打印机属性,下面是代码 打印程序(静默打印) package com.boci.PrintPDF; import j ...

  5. List<Integer>.remove()的一个小细节

    不废话,先上代码: ArrayList<Integer> col = new ArrayList<Integer>(); System.out.println("In ...

  6. java中Object转换成int或String类型方法

    转载: http://www.cnblogs.com/1020182600HENG/p/6137206.html Object obj = getObject(); if(obj instanceof ...

  7. 160518、java中使用百度地图（超级简单）

    第一步:导入如下内容,红色的部分需要申请(个人通过手机号就可以申请) <script type="text/javascript" src="http://api. ...

  8. CXF整合Spring之JaxWsProxyFactoryBean调用

    1.见解 1.1 客户端的接口代码还一定要和服务端的接口代码一样,连注解都要一样,不够灵活 1.2 当客户端访问服务器的请求地址时,如果服务端没有对应的地址,就会报错,但是又没有cxf的异常捕获处理 ...

  9. Browser Cookie Limits

    w https://cait.calarts.edu/hc/en-us/articles/217055138-Error-Maximum-Number-of-Cookie-Values-Reached ...

  10. Spring Data Jpa 初探

    Spring Data 项目的目的是为了简化构建基于 Spring 框架应用的数据访问计数,包括非关系数据库.Map-Reduce 框架.云数据服务等等;另外也包含对关系数据库的访问支持. 下载网址: ...