深拷贝与浅拷贝js，方法

Posted 2020-10-20 仔行天下

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了深拷贝与浅拷贝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));

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

以上是关于深拷贝与浅拷贝js，方法的主要内容，如果未能解决你的问题，请参考以下文章