深拷贝与浅拷贝js，方法

在使用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，方法

最新文章

热门文章