深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体,而不是引用。

假设B复制了A,修改A的时候,看B是否发生变化:

如果B跟着也变了,说明是浅拷贝,拿人手短!(修改堆内存中的同一个值)

如果B没有改变,说明是深拷贝,自食其力!(修改堆内存中的不同的值)

浅拷贝(shallowCopy)只是增加了一个指针指向已存在的内存地址,

深拷贝(deepCopy)是增加了一个指针并且申请了一个新的内存,使这个增加的指针指向这个新的内存,

使用深拷贝的情况下,释放内存的时候不会因为出现浅拷贝时释放同一个内存的错误。

浅复制:仅仅是指向被复制的内存地址,如果原地址发生改变,那么浅复制出来的对象也会相应的改变。
深复制:在计算机中开辟一块新的内存地址用于存放复制的对象。

浅拷贝实例:

//此递归方法不包含数组对象

var obj = { a:1, arr: [2,3] };
var shallowObj = shallowCopy(obj);function shallowCopy(src) {var newobj = {};for (var prop in src) {if (src.hasOwnProperty(prop)) {newobj[prop] = src[prop];}}return newobj;
}

因为浅复制只会将对象的各个属性进行复制,并不会进行递归复制,而JavaScript存储对象是存地址的,所以浅复制会导致Obj.arr和shallowObj.arr指向同一块内存地址:

导致的结果就是:

shallowObj.arr[1] = 5;
console.log(obj.arr[1]);     //5

深拷贝实例:

var obj = {a:1,arr: [1,2],nation : '中国',birthplaces:['北京','上海','广州']};var obj2 = {name:'杨'};obj2 = deepCopy(obj,obj2);console.log(obj2);
//深复制,要想达到深复制就需要用递归
function deepCopy(o, c){var c = c || {};for(var i in o){if(typeof o[i] === 'object'){if(o[i].constructor === Array){//这是数组c[i] = [];}else{//这是对象c[i] = {};}deepCopy(o[i], c[i]);}else{c[i] = o[i];}}return c;}

而深复制则不同,它不仅将原对象的各个属性逐个复制出去,而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上。这就不会存在obj和shallowObj的arr属性指向同一个对象的问题。

这样obj1和obj2分别拥有不同的内存地址,两边的值改变互不影响。


浅拷贝实现:

var a = [1, 2, 3, 4, 5];
var b = a;
a[0] = 2
console.log(a);
console.log(b);
//因为b浅拷贝a, ab指向同一个内存地址(堆内存中存的值)
//b会随着a的变化而变化
//[2, 2, 3, 4, 5]
//[2, 2, 3, 4, 5]

深拷贝实现:

function deepClone(obj){var newObj = obj instanceof Array ? []:{};if(typeof obj !== 'object'){return obj;}else{for(var i in obj){newObj[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i];}}return newObj;
}
var a = [1, 2, 4, 6, "a", "12", [1, 2]];
var b = deepClone(a);
a[3] = 7;
console.log(a);
console.log(b);
//b对象并没有因为a对象的改变而改变,因为b深拷贝a
[ 1, 2, 4, 7, 'a', '12', [ 1, 2 ] ]
[ 1, 2, 4, 6, 'a', '12', [ 1, 2 ] ]

前端浅拷贝和深拷贝的区别?相关推荐

  1. 前端面试:浅拷贝和深拷贝的区别?

    前些天发现了一个巨牛的人工智能学习博客,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转 那么大家晚上好,我是今天晚上的主讲老师,我是兔哥. 我们在面试中经常会被问到浅拷贝和深拷贝的区别,正好群里也 ...

  2. Python 赋值、浅拷贝、深拷贝的区别?

    http://songlee24.github.io/2014/08/15/python-FAQ-02/ 在写Python过程中,经常会遇到对象的拷贝,如果不理解浅拷贝和深拷贝的概念,你的代码就可能出 ...

  3. 详细解析赋值、浅拷贝和深拷贝的区别

    详细解析赋值.浅拷贝和深拷贝的区别 一.赋值(Copy) 赋值是将某一数值或对象赋给某个变量的过程,分为下面 2 部分 基本数据类型:赋值,赋值之后两个变量互不影响 引用数据类型:赋址,两个变量具有相 ...

  4. 彻底理解Python中浅拷贝和深拷贝的区别

    目录 前言 1. 浅拷贝和深拷贝的概念 2. is和==的区别 3. 赋值操作 4. copy模块里面的copy()方法 5. copy模块里面的deepcopy()方法 6.字典自带的copy方法 ...

  5. python中浅拷贝和深拷贝的区别_Python中浅拷贝和深拷贝的区别

    Python中浅拷贝和深拷贝的区别 浅拷贝和深拷贝示意图 如上图,简单点说 1. copy.copy 浅拷贝 只拷贝父对象,不会拷贝对象的内部的子对象. 2. copy.deepcopy 深拷贝 拷贝 ...

  6. python赋值浅拷贝和深拷贝的区别_python赋值、浅拷贝、深拷贝区别

    在写Python过程中,经常会遇到对象的拷贝,如果不理解浅拷贝和深拷贝的概念,你的代码就可能出现一些问题.所以,在这里按个人的理解谈谈它们之间的区别. 一.赋值(assignment) 在<Py ...

  7. 浅拷贝和深拷贝的区别?如何实现深拷贝?

    一.数据类型存储 JavaScript中存在两大数据类型: 基本类型 引用类型 基本类型数据保存在在栈内存中 引用类型数据保存在堆内存中,引用数据类型的变量是一个指向堆内存中实际对象的引用(也叫作IP ...

  8. 将对象拷贝一份备用,改变原对象的属性时,为啥备份数据也改变了?(赋值、浅拷贝和深拷贝的区别)

    前言 前两天在写代码时碰到一个很奇怪的问题,我有一个对象person = {name: ''tianxin, age: 18};,我需要将person目前的数据拷贝一份备用let copyPerson ...

  9. 浅拷贝与深拷贝的区别(详解)

    浅拷贝与深拷贝的区别 html 浅拷贝与深拷贝 一.数据类型 数据分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)和对象数据类型. 基 ...

最新文章

  1. matlab位运算函数
  2. Dialog源码分析
  3. HTTP解决设置返回header的code码为400仍然是200的问题
  4. c语言排序系统代码怎么写,排序概述(c语言)(示例代码)
  5. 运动控制卡的基类函数与实现例子
  6. 想获得腾讯发行机会?来“腾讯GAD•游戏创新大赛”
  7. 本月风味– Neo4j和Heroku
  8. 分布式消息规范 OpenMessaging 1.0.0-preview 发布 1
  9. python在d盘增加环境变量配置_怎样配置Python环境变量
  10. 基于javaweb+springboot的企业员工绩效工资管理系统(java+SpringBoot+FreeMarker+Mysql)
  11. python大众点评霸王餐_大众点评-每天自动抽取霸王餐
  12. 电脑消除,彻底清除电脑垃圾,让电脑运行更流畅!
  13. c++ lamber表达式
  14. OBS 插件开发 之 美颜
  15. 图像的表示方法和种类
  16. PAT 1100. Mars Numbers (20)
  17. FPGA学习笔记_UART串口协议_串口接收端设计
  18. 计算机全选的键盘,什么是全选快捷键,我将告诉您什么是计算机全选快捷键
  19. 数据采集-各工业设备-ModbusRtu说明
  20. 卡西欧计算机程序,卡西欧计算器编程计算示例

热门文章

  1. android小米推送,酸了!小米手机Android 10推送安排上了
  2. OSChina 周三乱弹 ——小萝卜变蘑菇大法
  3. 苹果手机丢了手表怎么解绑(苹果手机解绑丢失手表方法)
  4. 三星新耳机确定叫Galaxy Buds Pro
  5. 日常DDoS防御的一些小知识
  6. 面试快速复习(三):概率论与数理统计
  7. 一场雨下的师生爱、兄弟情
  8. 028 写给常光顾俺博客的朋友
  9. 基于金沙江Sentinel1数据的地表沉降分析
  10. 轻松拥有个性化Windows安装光盘