zoukankan      html  css  js  c++  java
  • 深拷贝与浅拷贝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输入框值变化,表格数据也会跟着变化。事实上,我们要的是,只有提交了,重新刷新,表格这个数据才会变化。

  • 相关阅读:
    各种贴图
    d3d11devicecontext
    小记2
    Tom Ryaboi
    Tessellation
    关于图形学
    第一章实验
    控制输入框只接收数字及小数点
    JQuery控制文本框是否可以输入
    SQLSERVER中查询一个存储过程使用到的地方
  • 原文地址:https://www.cnblogs.com/wulinzi/p/8283814.html
Copyright © 2011-2022 走看看