教你如何识别和实现深拷贝与浅拷贝

最新推荐文章于 2022-03-20 14:55:06 发布
最新推荐文章于 2022-03-20 14:55:06 发布
阅读量2.7k 收藏 1
点赞数 4
分类专栏： 考点_面试笔试 文章标签： javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44882362/article/details/112358725
版权

秒懂深浅拷贝

浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.

【情形一】for循环

		var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        var o = {};
        for (var k in obj) {
            // k 是属性名   obj[k] 属性值
            o[k] = obj[k];
        }
        console.log(o); 
        //o拷贝了obj的msg引用
        console.log(obj); 
        console.log('--------------');

在这里插入图片描述

		var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        var o = {};
        for (var k in obj) {
            // k 是属性名   obj[k] 属性值
            o[k] = obj[k];
        }
        console.log(o); 
        //o拷贝了obj的msg引用
        console.log(obj); 
		o.msg.age = 20; //这里换成obj.msg.age = 20;道理一样，引用值互相影响
        console.log('--------------');

在这里插入图片描述

		var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        var o = {};
        for (var k in obj) {
            // k 是属性名   obj[k] 属性值
            o[k] = obj[k];
        }
        console.log(o); 
        o.msg.age = 20;
        //o拷贝了obj的msg引用
        console.log(obj); 
        console.log('--------------');

在这里插入图片描述

		var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        var o = {};
        for (var k in obj) {
            // k 是属性名   obj[k] 属性值
            o[k] = obj[k];
        }
        console.log(o); 
        o.id=2;
        o.name="leon";
        //o.msg.age = 20;
        //o拷贝了obj的msg引用
        console.log(obj); 
        console.log('--------------');

在这里插入图片描述

		var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        var o = {};
        for (var k in obj) {
            // k 是属性名   obj[k] 属性值
            o[k] = obj[k];
        }
        o.id=2;
        o.name="leon";
        console.log(o); 
        
        //o.msg.age = 20;
        //o拷贝了obj的msg引用
        console.log(obj); 
        console.log('--------------');

在这里插入图片描述

		var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        var o = {};
        for (var k in obj) {
            // k 是属性名   obj[k] 属性值
            o[k] = obj[k];
        }
        obj.id=2;
        obj.name="leon";
        console.log(o); 
        
        //o.msg.age = 20;
        //o拷贝了obj的msg引用
        console.log(obj); 
        console.log('--------------');

在这里插入图片描述

		var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        var o = {};
        for (var k in obj) {
            // k 是属性名   obj[k] 属性值
            o[k] = obj[k];
        }
        
        console.log(o); 
        
        //o.msg.age = 20;
        //o拷贝了obj的msg引用
        console.log(obj); 
        obj.id=2;
        obj.name="leon";
        console.log('--------------');

在这里插入图片描述
一定得好好注意里面的细节。对于浅拷贝来说，原始值原样复制，修改其中一方原始值不影响另外一方；更深层次的引用类型只复制引用，修改引用会互相影响。

【情形二】o=obj

		var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        var o = {};
        
       	console.log('--------------'); 
        o=obj
        console.log(o);//
        o.msg.age = 20;//
        console.log(obj);//

在这里插入图片描述

		var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        var o = {};
        
       	console.log('--------------'); 
       	//o整个复制了对obj的引用
        o=obj
        console.log(o);//
        
        console.log(obj);//
        obj.msg.age = 20;//

在这里插入图片描述

		var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        var o = {};
        
       	console.log('--------------'); 
       	//o整个复制了对obj的引用
        o=obj
        console.log(o);//
        
        console.log(obj);//
        obj.id=2   //o.id=2同理
        obj.name="leon"  //o.name="leon"同理

在这里插入图片描述

		var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        var o = {};
        
       	console.log('--------------'); 
       	//o整个复制了对obj的整个引用
        o=obj
        console.log(o);//
        
        o.id=2
        o.name="leon"
        
        console.log(obj);//

在这里插入图片描述
o=obj，相当于是将obj整个一层看作整体的引用，将整个对象类型的引用完整复制给了o。因此其中的任何数据修改都会互相影响。

【情形三】Object.assign(o, obj)

		var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        var o = {};
        
       	console.log('--------------');
        Object.assign(o, obj)
        
        console.log(o);//
        
        o.msg.age = 20;//
        
        console.log(obj);//

在这里插入图片描述

		var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        var o = {};
        
       	console.log('--------------');
        Object.assign(o, obj)
        
        console.log(o);//
        
        console.log(obj);//
        obj.msg.age = 20;//

在这里插入图片描述

		var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        var o = {};
        
       	console.log('--------------');
        Object.assign(o, obj)
        
        console.log(o);//
        
        o.id=2
        o.name="leon"
        
        console.log(obj);//

在这里插入图片描述

		var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
        var o = {};
        
       	console.log('--------------');
        Object.assign(o, obj)
        
        console.log(o);//
        
        console.log(obj);//
        obj.id=2
        obj.name="leon"

在这里插入图片描述
对于Object.assign(o, obj)来说，属于浅拷贝，只拷贝一层，更深层次对象级别的只拷贝引用。

深拷贝拷贝多层, 每一级别的数据都会拷贝。

深拷贝的实现（递归的方式）

		var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            },
            color: ['pink', 'red']
        };  //old

        var o = {};  //new
// -------------------------------------------------
        // 封装函数 
        function deepCopy(newobj, oldobj) {
            for (var k in oldobj) {
                // 判断我们的属性值属于那种数据类型
                // 1. 获取属性值  oldobj[k]
                var item = oldobj[k];

                // 2. 判断这个值是否是数组
                if (item instanceof Array) {
                    newobj[k] = [];
                    deepCopy(newobj[k], item)
                } else if (item instanceof Object) {

                    // 3. 判断这个值是否是对象
                    newobj[k] = {};
                    deepCopy(newobj[k], item)
                } else {
    // 4. 属于简单数据类型（number string null undefined boolean）
                    newobj[k] = item;
                }

            }
        }
        
        deepCopy(o, obj);  //将后者拷贝给前者
        
        console.log(o);//  age 20
// ------------------------------------------
        var arr = [];
        console.log(arr instanceof Object);   //true**********
        //console.log(arr instanceof Array);   //true**********

        o.msg.age = 20;//
        
        console.log(obj);  //拷贝前后两个对象互不影响干扰  age 18

在这里插入图片描述

		var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            },
            color: ['pink', 'red']
        };  //old

        var o = {};  //new
// -------------------------------------------------
        // 封装函数 （递归实现）
        function deepCopy(newobj, oldobj) {
            for (var k in oldobj) {
                // 判断我们的属性值属于那种数据类型
                // 1. 获取属性值  oldobj[k]
                var item = oldobj[k];

                // 2. 判断这个值是否是数组
                if (item instanceof Array) {
                    newobj[k] = [];
                    deepCopy(newobj[k], item)
                } else if (item instanceof Object) {

                    // 3. 判断这个值是否是对象
                    newobj[k] = {};
                    deepCopy(newobj[k], item)
                } else {
    // 4. 属于简单数据类型（number string null undefined boolean）
                    newobj[k] = item;
                }

            }
        }
        
        deepCopy(o, obj);  //将后者拷贝给前者
        
        //obj.msg.age = 20;//都是下图结果，因为在此之前，obj已经深拷贝给了o，
        //此后的修改互不影响。
        console.log(o);//
// ------------------------------------------
        var arr = [];
        console.log(arr instanceof Object);   //true**********
        //console.log(arr instanceof Array);   //true**********

        obj.msg.age = 20;//
        
        console.log(obj);  //拷贝前后两个对象互不影响干扰 
        //obj.msg.age = 20;//都是下图结果

在这里插入图片描述
对于简单基本数据类型的原始值，更是不会相互影响。

		var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            },
            color: ['pink', 'red']
        };  //old

        var o = {};  //new
// -------------------------------------------------
        // 封装函数 （递归实现）
        function deepCopy(newobj, oldobj) {
            for (var k in oldobj) {
                // 判断我们的属性值属于那种数据类型
                // 1. 获取属性值  oldobj[k]
                var item = oldobj[k];

                // 2. 判断这个值是否是数组
                if (item instanceof Array) {
                    newobj[k] = [];
                    deepCopy(newobj[k], item)
                } else if (item instanceof Object) {

                    // 3. 判断这个值是否是对象
                    newobj[k] = {};
                    deepCopy(newobj[k], item)
                } else {
    // 4. 属于简单数据类型（number string null undefined boolean）
                    newobj[k] = item;
                }

            }
        }
        
        deepCopy(o, obj);  //将后者拷贝给前者
        
        //******此后的修改互不影响。******
        console.log(o);//
// ------------------------------------------
        var arr = [];
        console.log(arr instanceof Object);   //true**********
        //console.log(arr instanceof Array);   //true**********
        
        console.log(obj);  //拷贝前后两个对象互不影响干扰 
        obj.id = 20;

在这里插入图片描述
将obj深拷贝给了o之后，此后的任何数据的修改都不会相互影响。

关于深拷贝与浅拷贝的相关实现介绍到这，若有帮助，烦请留个赞~ ^ _ ^,一起进步学习。

微辣-
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
如何实现数组的浅拷贝和深拷贝
cjwjyooo的博客
05-16 1万+
1.    背景介绍javascript分原始类型与引用类型。Array是引用类型，直接用“=”号赋值的话，只是把源数组的地址(或叫指针)赋值给目的数组，并没有实现数组的数据的拷贝。这种方式的实现属于浅拷贝。深拷贝是开辟新的储存空间，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。2.    知识剖析一维数组深拷贝slice和concat方法1.  slice()slic...
Java Clone深拷贝与浅拷贝的两种实现方法
08-26
Java Clone 深拷贝与浅拷贝的两种实现方法 Java Clone 是 Java 语言中的一种复制对象的机制，它可以将一个对象的所有属性和状态复制到另一个对象中，实现对象的深拷贝和浅拷贝。下面我们将讨论 Java 中的深拷贝和浅...
深浅拷贝实现的方式
yz2319697673的博客
03-20 377
浅拷贝: 浅拷贝只是创建数据并简简单单的把栈当中的引用地址拷贝了一份,当修改新拷贝的值时,被拷贝的对象也会被修改掉 实现方式: Object.assign Array.prototype.slice() , Array.prototype.concat() 使用拓展运算符实现的复制([…]) 深拷贝: 深拷贝开辟一个新的栈,两个对象属性完全相同,但是对应两个不同的地址,修改一个对象的,另一个对象的属性不会改变 实现方式: _.cloneDeep() jQuery.extend() MessageChann
如何实现一个深浅拷贝
从人到猿
10-19 3782
把深浅拷贝单独作为一讲来专门讲解，是因为在 JavaScript 的编程中经常需要对数据进行复制，什么时候用深拷贝、什么时候用浅拷贝，是开发过程中需要思考的；同时深浅拷贝也是前端面试中比较高频的题目。 因此，深入学习这部分知识有助于提高手写 JS 的能力，以及对一些边界特殊情况的深入思考能力，这一讲会结合最基础但是又容易写不好的的题目来帮助提升。
【javascript】详解javaScript的深拷贝
weixin_33862993的博客
08-14 470
      前言： 最开始意识到深拷贝的重要性是在我使用redux的时候（react + redux）， redux的机制要求在reducer中必须返回一个新的对象，而不能对原来的对象做改动，事实上，当时我当然不会主动犯这个错误，但很多时候，一不小心可能就会修改了原来的对象，例如：var newObj = obj; newObj.xxx = xxx  实际上，这个时候newObj和obj两个...
什么是深拷贝和浅拷贝，如何进行浅拷贝？
qq_42822993的博客
09-10 974
什么是深拷贝和浅拷贝，如何进行浅拷贝 一、了解深浅拷贝前先来了解一个堆区、栈区 栈区存放基础数据类型的值(引用或常量) 堆区存放引用数据类型的值 浅拷贝：直接赋值地址 深拷贝：在内存中新建一个新的拷贝对象，将引用赋值 二、数组深拷贝 1.for循环拷贝 2.slice() 3.concat() 4.ES6的扩展运算符… 三、对象深拷贝 方法1：使用 JSON.parse(JSON.stringify(obj)); var obj={ name:'zhangsan', age:12 } var
JS浅拷贝和深拷贝原理与实现方法分析
12-11
本文实例讲述了JS浅拷贝和深拷贝原理与实现方法。分享给大家供大家参考，具体如下： 浅拷贝只会拷贝一层，深层的引用类型改变还是会受到影响。 深拷贝是所有内部的属性还有值都被拷贝了一份，不管深层的引用类型怎么...
JavaScript深拷贝和浅拷贝概念与用法实例分析
01-19
本文实例讲述了JavaScript深拷贝和浅拷贝概念与用法。分享给大家供大家参考，具体如下： js中的浅拷贝和深拷贝，只是针对复杂数据类型(Objcet，Array)的复制问题。简单来讲浅拷贝和深拷贝都可以实现在原有对象的基础...
java深入理解浅拷贝和深拷贝
12-21
本文将会深入的探讨一下在拷贝对象中会出现的浅拷贝和深拷贝的情况。 拷贝接口 java中所有的对象都是继承自java.lang.Object。Object对象中提供了一个clone方法，来供我们对java对象进行拷贝。 protected native ...
终于弄清楚JS的深拷贝和浅拷贝了-读这一篇就够了
热门推荐
眼里长着太阳，笑里全是坦荡
07-27 3万+
今天，CVTE面试官问了深拷贝和浅拷贝的问题 我的回答是：浅拷贝是拷贝了对象的引用，当原对象发生变化的时候，拷贝对象也跟着变化；深拷贝是另外申请了一块内存，内容和原对象一样，更改原对象，拷贝对象不会发生变化； 但是面试官给我说：浅拷贝是拷贝一层，深层次的对象级别的就拷贝引用；深拷贝是拷贝多层，每一级别的数据都会拷贝出来； 回来查了一下资料，并没有发现面试官说的这种关于深拷贝浅拷贝的说法，看了...
深浅拷贝详解
晓理
04-18 322
原文链接：https://blog.csdn.net/qq_38646470/article/details/79976685 专栏链接：https://blog.csdn.net/column/details/20026.html
浅谈深拷贝和浅拷贝（js）
GuoZebin的博客
10-05 2万+
如何区分深拷贝与浅拷贝？简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明是浅拷贝，如果B没变，那就是深拷贝。深入点来说，就是B复制了A，如果B复制的是A的引用，那就是浅拷贝，如果B复制的是A的本体，那就是深拷贝。在深入了解深拷贝和浅拷贝之前，我们先得了解堆栈和数据类型。 一.堆栈和数据类型 在js中，数据类型分为两种，基本类型和引用类型。基本类型指的是简单...
对深浅拷贝的一点认识
[也许有路，我不知道]的博客
06-02 284
C++初学—拷贝构造函数—深浅拷贝—简单认识这学期开了C++课程，上课不认真听课的我，选择敲下老师课件中所有代码来学习，到构造函数模块认识了有个叫做“拷贝构造函数”的东西，其中深浅拷贝令我感到困惑，在上网查阅了相关资料以及读过各博主的博文之后，有感想体会如下，以供日后查缺补漏。 重所周知的拷贝构造函数（复制构造函数）有三个用途： 1、一个对象作为函数参数，以值传递的方式传入函数体；
深拷贝+浅拷贝，及深拷贝的几种实现方式
beibei_niao的博客
03-09 3744
------深拷贝 ：拷贝对象的具体内容，内存地址是自主分配的，拷贝结束后两个对象虽然存的值一样，但是内存地址不一样 ------浅拷贝 ：对内存地址的复制，让目标对象指针和源对象指向同一片内存空间。注意：当内存销毁的时候，指向对象的指针 ，必须重新定义，才能够使用（浅拷贝是一个传址,也就是把a的值赋给b的时候同时也把a的址赋给了b， 当b（a）的值改变的时候，a（b）的值同时也会改变） --...
es6深拷贝_你以为面试官在问深拷贝的时候，仅仅是在问深拷贝吗
weixin_39640195的博客
11-20 56
深拷贝可以说是前端面试中非常高频的问题，也是一道基础题。所谓的基础不是说深拷贝本身是一个非常简单、非常基础的问题，而是面试官要通过深拷贝来考察候选人的JavaScript基础，甚至是程序设计能力。为什么需要深拷贝？第一个问题，也是最浅显的问题，为什么 JavaScript 中需要深拷贝？或者说如果不使用深拷贝复制对象会带来哪些问题？我们知道在 JavaScript 中存在“引用类型“和“值类型“的...
面试篇---1 如何区分深拷贝与浅拷贝
weixin_33845477的博客
02-01 181
如何区分深拷贝与浅拷贝？ 简单来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。 浅拷贝例子： var a=[0,1,2,3,4], b=a; console.log(a===b); a[0]=1; conso...
浅拷贝以及四种深拷贝的方法
Gaoshanyz的博客
10-21 861
浅拷贝：仅仅是指针给了另一个对象 深拷贝 两个对象之间没有任何关系 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head>
浅谈深拷贝和浅拷贝及几种实现方法
weixin_30678349的博客
11-18 354
讨论深拷贝与浅拷贝之前，要先回顾一下值传递与引用传递： 值传递： var a = 10; var b = a; b++; //console.log(a,b)//a:10 b:11 引用传递： var arr = [10,20,30,40]; var arr1 = arr; arr1[0] = 40; //console.log(arr,arr1);//[40,20,...
浅拷贝与深拷贝的实现与详解
yxc852814721的博客
05-29 203
浅拷贝与深拷贝java中的数据类型基本数据类型：引用数据类型：什么是浅拷贝？什么是深拷贝？赋值浅拷贝深拷贝clone方式clone浅拷贝clone深拷贝Serializable方式 java中的数据类型 基本数据类型： java中的基本数据类型有八种（ byte、short、int、long、float、double、boolean、char、String ），基本数据类型的特点就是存储在栈中。 引用数据类型： java中的引用数据类型有三种 （ 类、接口、数组），引用数据类型的特点就是存储的是该对象在栈中
深拷贝和浅拷贝，实现深拷贝的方式
最新发布
03-08
与浅拷贝不同，深拷贝会为新对象分配独立的内存空间，使得新对象和原始对象完全独立，互不影响。 实现深拷贝的方式有多种，以下是几种常见的方式： 1. 手动实现深拷贝：通过逐个复制原始对象的成员变量，创建新的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值