在使用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. 数据库面试题之PL/SQL面试题

    create table employee( id ) not null, -- 员工工号 salary ,) not null, -- 薪水 name ) not null -- 姓名 ); 第一题 ...

  2. [Openwrt]wifi桥接设置

    1/连接wifi,用扫描加入,新建一个ingerface  client模式 2/新建wifi ,network选lan和自身新建的interface.此interface设置为bridge模式,连接 ...

  3. mathtype免费版下载及序列号获取地址

    在编辑公式这个方面来说,MathType是使用最多的一个工具,因为它操作简单,不需要复杂的学习过程就可以很快地掌握操作技巧,并且功能也比Office自带的公式编辑器完善很多,可以对公式进行批量修改.编 ...

  4. freemarker include 和 import

    lib/my_test.ftl 模板内容如下: <#macto copyright date> <p>Copyright (C)${date}Julia Smith.All r ...

  5. PHP正则表达式 /i, /s, /x,/u, /U, /A, /D, /S等模式修饰符

    i (PCRE_CASELESS) 如果设置了这个修饰符, 模式中的字母会进行大小写不敏感匹配. m (PCRE_MULTILINE) 默认情况下, PCRE认为目标字符串是由单行字符组成的(然而实际 ...

  6. 【javaScript基础】马上调用函数表达式

    在javaScript中,每一个函数被调用时,都会创建一个新的运行上下文.由于在一个函数里面定义的变量和函数仅仅能在里面訪问.在外面是不行的.上下文提供了一种非常easy的方法来创建私有性. //ma ...

  7. ThreadLocal并不是一个Thread

    ThreadLocal是什么? 早在JDK 1.2的版本中就提供java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.使用这个工具类可以很简洁 ...

  8. Java Web项目--使用Servlet生成一个页面

    为了生成一个servlet对应的网页.我们需要新建一个web.xml,其中将会放置servlet的相关信息.web.xml文件放置在WebContent/WEB-INF/目录下.(我们在Eclipe中 ...

  9. WPS长文档编辑技巧之二:对样式的设置与修改

    目录:       1.使用系统内置样式 2.如何修改样式 3.如何自定义样式 4.在文档使用多级编号 5.结合样式编辑文档大纲 6.利用文档结构图查看大纲结构 正文: 1.使用系统内置样式 在使用样 ...

  10. 使用javascript来访问本地文件夹

    常用的.net 的aspx文件由于运行在服务器端,并不具有访问用户本地文件夹的权限,导致类似于<a href="file:///d:/backup" > open fo ...