在使用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. POJ 3168 Barn Expansion (几何+排序)

    题目链接:id=3168">POJ 3168 Barn Expansion 题意:抽象出来就是给出n个矩形的坐标是(左下角和右上角的坐标,矩形的边都是平行x,y轴),问有几个矩形和其它 ...

  2. Mac 安装Jupyter notebook

    python:mac下自带Python 2.7.10 1.先升级了pip安装工具:sudo python -m pip install --upgrade --force pip 2.安装setupt ...

  3. WinForm------如何打开子窗体的同时关闭父窗体

    方法: 如何打开子窗体的同时关闭父窗体 this.Hide(); new Frm_Management().ShowDialog(); this.Close();

  4. Thinkphp中如何书写按照指定字段同步更新的ORM

    群友提出一个问题,如何在更新某个字段的时候同步另一个字段数据过来,即 update table set column1 =column2 where xxx 写原生SQL当然可行,不过既然有ORM那就 ...

  5. Qt 等待一段时间例如1s

    QTime dieTime = QTime::currentTime().addMSecs(1000); while( QTime::currentTime() < dieTime ) QCor ...

  6. 总结界面框架_UI_Adapter

    本人定期更新经典案例及解决方案如有疑问请联系我QQ1822282728 -- 277627117   下面是常用到的ui  Demo 安卓三级筛选菜单listview(非常经典) http://dow ...

  7. uilabel 和uitextview 自适应大小

    本文转载至 http://blog.csdn.net/liulichao20/article/details/8957752 分类: ios2013-05-21 22:06 321人阅读 评论(0)  ...

  8. MY97默认只能选择昨天的时间

    <input type="text" id="startTime" class="Wdate" style="width: ...

  9. 【BZOJ1935/4822】[Shoi2007]Tree 园丁的烦恼/[Cqoi2017]老C的任务 树状数组

    题意:两道题差不多,都是给你一堆平面上的点,每个点有权值,然后m次询问求某一矩形区域内的点权和 题解:先离散化,然后将询问拆成左右两条线段,然后将点和这些线段一起按x坐标排序,在y轴上维护树状数组.然 ...

  10. LeetCode 笔记系列15 Set Matrix Zeroes [稍微有一点hack]

    题目:Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in place. Fol ...