在使用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. H&M

    H&M于1947年由Erling Persson在瑞典创立.如今,H&M在全世界1500 多个专卖店销售服装.配饰与化妆品.位于瑞典市Stora Gatan大街的老H&M店是世 ...

  2. ES5与ES6的继承

    JavaScript本身是一种神马语言: 提到继承,我们常常会联想到C#.java等面向对象的高级语言(当然还有C++),因为存在类的概念使得这些语言在实际的使用中抽象成为一个对象,即面向对象.Jav ...

  3. 第二十五篇：使用 sigaction 函数实现可靠信号

    前言 在前文中,讲述了一个可靠信号的示例.它分成几个步骤组成( 请参考前文 ).在 Linux 系统编程中,有个方法可以将这些步骤给集成起来,让我们使用起来更加的方便. 那就是调用 sigaction ...

  4. IOS7开发～新UI学起（三）

    1.UITextView: A )      IOS7新增加的 UITextViewDelegate 方法: - (BOOL)textView:(UITextView *)textView shoul ...

  5. Android 中加载几百张图片做帧动画防止 OOM 的解决方案

    Android 中加载几百张图片做帧动画防止 OOM 的解决方案 最近,项目中有个需求:就是要做一个帧动画,按理说这个是很简单的!但是我能说这个帧动画拥有几百张图片吗?...... 填坑一 ---帧动 ...

  6. 【BZOJ4275】[ONTAK2015]Badania naukowe DP

    [BZOJ4275][ONTAK2015]Badania naukowe Description 给定三个数字串A,B,C,请找到一个A,B的最长公共子序列,满足C是该子序列的子串. Input 第一 ...

  7. XStream中几个注解的含义和用法

    转自:http://blog.csdn.net/robert_mm/article/details/8459879 XStream是个很强大的工具,能将java对象和xml之间相互转化.xstream ...

  8. LeetCode 笔记系列11 First Missing Positive ［为什么我们需要insight］

    题目: Given an unsorted integer array, find the first missing positive integer. For example,Given [1,2 ...

  9. Servlet3.0文件上传

    Servelt3.0文件上传作为一种便捷的文件上传方式很是值得我们去应用的 1.Servlet3.0文件上传使用步骤 浏览器端的要求 表单的提交方法必须是post 必须有一个文件上传组件 <in ...

  10. 160608、mysql距离函数st_distance

    随着近几年各类移动终端的迅速普及,在手机移动定位app中,附近的人,附近的地点功能十分常见,基于地理位置的服务(LBS)和相关应用也越来越多,而支撑这些应用的最基础技术之一,就是基于地理位置信息的处理 ...