通过堆栈分析深拷贝、浅拷贝、赋值的差异

news2025/7/25 6:52:14

前言

数据类型分为:

基本数据类型String、Number、Boolean、Null、Undefined、Symbol

对象数据类型Object、Array

基本数据类型的特点:直接存储在栈(stack)中的数据
引用数据类型的特点:存储的是该对象在栈中引用,真实的数据存放在堆内存里

引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。

深拷贝与浅拷贝

深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。

  • 浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。

  • 但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。

赋值是深拷贝还是浅拷贝?

当我们把一个对象赋值给一个新的变量时,赋的其实是该对象的在栈中的地址,而不是堆中的数据。也就是两个对象指向的是同一个存储空间,无论哪个对象发生改变,其实都是改变的存储空间的内容,因此,两个对象是联动的。

浅拷贝是按位拷贝对象,它会创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值;如果属性是内存地址(引用类型),拷贝的就是内存地址 ,因此如果其中一个对象改变了这个地址,就会影响到另一个对象。即默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝),即只复制对象空间而不复制资源。

直接赋值:

var origin = {db:{id:'001'},num:33,read:[1,2,3,4]}
var data = origin;
origin.num= 10;
origin.read = [1,2];
origin.db.id = '002;
origin.db = {text:'aaa'}

那么浅拷贝跟赋值会是一样的吗?

浅拷贝:

假设我们有个浅拷贝的方法,叫shallowCopy。具体的浅拷贝的方法请看本文的附录-浅拷贝方法

var origin = {db:{id:'001'},num:33,read:[1,2,3,4]}
var data = shallowCopy(origin);
origin.num = 10;
origin.read[0] = 10;
origin.db.id = '003'

于是,我们可以说:赋值的话,旧对象的改变一定会引起新对象的改变(无论在一层或N层)

为什么要份第一层还是第N层,我们来看这个梨子:

const data = {arr:[1,2,3],inner:{arr:[3,4,5]}}
const data2 = shallowCopy(data)
data.arr = [0,0,0];
data.inner.arr = [0,0,0]

可以看到浅拷贝后第一层引用对象不关联。具体见附录-浅拷贝面试题

深拷贝方法

可以看到,深拷贝后的结果与源数据是两个完全独立的数据。

深拷贝方法实现:

一、 通过JSON.stringify()

var a = {data:{name:'xxx'}}
var b = JSON.parse(JSON.stringify(a))
b; // {data:{name:'xxx'}}
a.data.name = 'abc';
b  // {data:{name:'xxx'}}

JSON.stringify()进行深拷贝有弊端:

var obj = {
        a:function(){}, 
        b: undefined, 
        c: null, 
        d: Symbol('s'), 
    }
var cloneObj = JSON.parse(JSON.stringify(obj ))
cloneObj // {c:null}

会忽略value为function, undefind, symbol, 并且在序列化BigInt时会抛出语法错误:TypeError: Do not know how to serialize a BigInt

更多弊端请看本文附录-JSON.parse(JSON.stringfy(对象))弊端

二、函数库lodash

该函数库也有提供_.cloneDeep用来做 Deep Copy

三、手写递归

递归方法实现深度克隆原理:遍历对象、数组直到里边都是基本数据类型,然后再去复制,就是深度拷贝

附录-浅拷贝方法

一、手写浅拷贝

// 数组 对象都可以用
const shallowClone = (obj) => {
  const dst = {};
  for (let prop in obj) {
    if (arr.hasOwnProperty(prop)) {
        dst[prop] = obj[prop];
    }
  }
  return dst;
}
  1. for...in:遍历 Object 对象 obj,将可枚举值列举出来。

  1. hasOwnProperty():检查该枚举值是否属于该对象 obj,如果是继承过来的就去掉,如果是自身的则进行拷贝。

二、Object.assign()

Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。但是 Object.assign()进行的是浅拷贝,拷贝的是对象的属性的引用,而不是对象本身。

var obj = {data:{name:'xxx'}}
var newCloneObj = Object.assign({},obj)
obj.data.name ='ddd'
newCloneObj.data.name// ddd

三、ES6的拓展运算符

var obj = {data:{name:'xxx'}}
var newCloneObj = {...obj}
obj.data.name ='ddd'
newCloneObj.data.name  // ddd

四、Object.create()

Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。

Object.create(proto,[propertiesObject])接收两个参数一个是新创建对象的__proto__, 一个属性列表

let aa = {
    a: undefined, 
    func: function(){console.log(1)}, 
    b:2, 
    c: {x: 'xxx', xx: undefined},
}
let bb = Object.create(aa, Object.getOwnPropertyDescriptors(aa))

五、Array.prototype.concat()

concat() 是数组的一个内置方法,用户合并两个或者多个数组。

这个方法不会改变现有数组,而是返回一个新数组。

const arr1 = [
  1,
  {
    username: 'jsliang',
  },
];

let arr2 = arr1.concat();
arr2[0] = 2;
arr2[1].username = 'LiangJunrong';
console.log(arr1);
// [ 1, { username: 'LiangJunrong' } ]
console.log(arr2);
// [ 2, { username: 'LiangJunrong' } ]

六、Array.prototype.slice()

slice() 也是数组的一个内置方法,该方法会返回一个新的对象。

slice() 不会改变原数组。

const arr1 = [
  1,
  {
    username: 'jsliang',
  },
];

let arr2 = arr1.slice();
arr2[0] = 2;
arr2[1].username = 'LiangJunrong';
console.log(arr1);
// [ 1, { username: 'LiangJunrong' } ]
console.log(arr2);
// [ 2, { username: 'LiangJunrong' } ]

附录-浅拷贝面试题

我们先来看看

const data = {arr:[1,2,3],inner:{arr:[3,4,5]}}
const data2 = shallowCopy(data)
data.arr[0] = 3
data.arr = [0,0,0]

data.arr[0] = 3

继上面的内容,我们先解析一下:

不论变量是存在栈内,还是存在堆里(反正都是在内存里),其结构和存值方式是差不多的,都有如下的结构:

let foo = 1;
let bar = 2;

我们新建data2:

当我们第一次修改源数据data.arr[0]:

相对于我们去修改堆空间里对应内存地址的值。而不是开劈新的内存空间进行存值。

堆空间里基本数据类型的替换将沿用原来的内存地址,如果引用类型的替换则将开辟新的内存地址,等待回收老的内存地址【不一定会回收,因为可能被其他引用】

此时并不会改变data和data2里arr的引用地址。所以data和data2同步关联。

第二次修改源数据data.arr = [0,0,0]:

可以看到的是堆里新开辟了一个空间放引用对象arr的内容。同时解绑data.arr的引用地址,把新空间的地址绑定到data.arr上,而data2.arr由于还是指向0x0206的内存空间,所以旧的内存空间没有被收回。data2.arr未发生改变

再回归到问题本身:

为什么data.inner.arr = [0,0,0]会同时改变data和data2里面的值?

你可以看到,data和data2的inner,即第二层,都是指向同一个内存空间,

当我们去改变inner对象内容里面的赋值的时候,data和data2的inner指向地址不变,只不过里面的arr我们会重新读值。使得两者改动时发生关联。

所以我们说,无论浅拷贝通过什么方法实现,拷贝结果的第一层会是深拷贝(两个内存空间)

附录-JSON.parse(JSON.stringfy(对象))弊端

  • 如果obj里面存在时间对象,JSON.parse(JSON.stringify(obj))之后,时间对象变成了字符串。

  • 如果obj里有RegExp、Error对象,则序列化的结果将只得到空对象。

  • 如果obj里有函数,undefined,则序列化的结果会把函数, undefined丢失。

  • 如果obj里有NaN、Infinity和-Infinity,则序列化的结果会变成null。

  • JSON.stringify()只能序列化对象的可枚举的自有属性。如果obj中的对象是有构造函数生成的, 则使用JSON.parse(JSON.stringify(obj))深拷贝后,会丢弃对象的constructor。

  • 如果对象中存在循环引用的情况也无法正确实现深拷贝。

function Person (name) {
    this.name = 20
}

const lili = new Person('lili')

let a = {
    data0: '1',
    date1: [new Date('2020-03-01'), new Date('2020-03-05')],
    data2: new RegExp('\\w+'),
    data3: new Error('1'),
    data4: undefined,
    data5: function () {
        console.log(1)
    },
    data6: NaN,
    data7: lili
}

let b = JSON.parse(JSON.stringify(a))

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/394826.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

云原生时代顶流消息中间件Apache Pulsar部署实操之轻量级计算框架

文章目录Pulsar Functions(轻量级计算框架)基础定义工作流程函数运行时处理保证和订阅类型窗口函数定义窗口类型滚动窗口滑动窗口函数配置函数示例有状态函数示例窗口函数示例自定义函数开发定义原生语言接口示例Pulsar函数SDK示例Pulsar Functions(轻量级计算框架) 基础定义 …

实验一:递归

1.铺砖 题目描述: 对于一个2行N列的走道。现在用12或22的砖去铺满。问有多少种不同的方式(请用递推方式求解)。如果N很大,需要高精度计算。下图是一个2行17列的走道的某种铺法: 输入要求: 一个整数N&a…

GitHub Copilot 全新升级,工作效率提升 55%

2021年 6 月,GitHub 和 OpenAI 推出了 GitHub Copilot 预览版,可根据命名或者正在编辑的代码上下文为开发者提供代码建议,被称为“你的 AI 结对程序员”。 近日,GitHub 宣布,经过去年 12 月以来的短暂测试后&#xff…

Spring基本概念与使用

文章目录一、Spring概念1.容器2.IoC3.DI4.Ioc与DI的关系二、Spring创建与使用1.Maven2.添加Spring框架支持注:国内的Maven源配置3.简单实例(1)创建一个Bean对象。(2)将Bean对象存储到Spring当中(3&#xff…

JavaWeb基础

Servlet 是在服务器上运行的小程序。这个词是在 Java applet的环境中创造的,Java applet 是一种当作单独文件跟网页一起发送的小程序,它通常用于在客户端运行,结果得到为用户进行运算或者根据用户互作用定位图形等服务。服务器上需要一些程序…

Jenkins最新版安装调试

清理旧的jenkins: find / -name jenkins* 一项一项的清理:rm -rf /var/log/jenkins* 下载最新版jenkins镜像:jenkins-redhat-stable安装包下载_开源镜像站-阿里云 上传到服务器: 安装命令: yum install -y jenkins…

Excel不愧是宝藏游戏机

你玩过95版Excel自带的游戏彩蛋吗? 众所周知,微软有做彩蛋的传统,这个传统最早是在1979年由比尔盖茨写下的basic复活节彩蛋开始的,当时你只需要输入“WAIT6502,1″,就可以跳出“MICROSOFT!”字符串。到后来,全体微软开…

Redis学习(六):主从复制,发布订阅和实际可能遇到缓存失效的情况

Redis发布订阅 Redis发布订阅(Public/Subscribe)是一种消息通信模式:发送者发送消息,订阅者接收消息。 Redis客户端可以订阅任意数量的频道。 这张图里有三个角色: 消息发送者频道(消息队列)…

AIGC时代,大模型微调如何发挥最大作用?

人工智能的快速发展推动了大模型的广泛应用,它们在语言、视觉、语音等领域的应用效果已经越来越好。但是,训练一个大模型需要巨大的计算资源和时间,为了减少这种资源的浪费,微调已经成为一种流行的技术。微调是指在预训练模型的基…

2023年3月全国DAMA-CDGA/CDGP数据管理认证火热报名中...

弘博创新是DAMA中国授权的数据治理人才培养基地,贴合市场需求定制教学体系,采用行业资深名师授课,理论与实践案例相结合,快速全面提升个人/企业数据治理专业知识与实践经验,通过考试还能获得数据专业领域证书。 DAMA认…

【iOS】—— 浅看block源码

block 文章目录block如何通过终端clang生成源码cpp文件block实质截获自动变量全局变量和静态变量的截获__block说明符iOS开发“强弱共舞”——weak和strong配套使用解决block循环引用问题如何通过终端clang生成源码cpp文件 之前在学习block中学习的比较浅,只看了oc…

sentinel源码入门

sentinel是一个流量治理组件,主要用来做降级、熔断和限流,以及监控等,sentinel的使用相对来说比较简单,这篇博客主要介绍sentinel的源码 入口 在使用sentinel的时候,我们需要引入sentinel的相关jar包,然后…

如何使用码匠连接 ClickHouse

目录 在码匠中集成 ClickHouse 在码匠中使用 ClickHouse 关于码匠 ClickHouse 数据源是一种列式数据库管理系统,由俄罗斯 Yandex 公司开发和维护。它专注于高性能、高并发、高可扩展性和低延迟的数据处理,特别是在海量数据的 OLAP(联机分析…

性能分析利器:火焰图

什么是火焰图 火焰图(FlameGraph)是是由 Linux 性能优化大师 Brendan Gregg 发明的。通过 perf 等工具分析得到结果,看起来就像是火焰,这也是它的名字的由来。火焰图以一个全局的视野来看待时间分布,它从底部往顶部&am…

Dockerfile部署SpringBoot项目

Dockerfile部署SpringBoot项目 文章目录 利用Dockerfile部署SpringBoot项目 1、创建一个SpringBooot项目并且打成jar包2、在Linux中创建一个文件夹,来做docker测试3、将jar包上传到Linux中4、编写Dockerfile文件5、制作镜像6、启动容器7、查看容器启动日志8、访问接…

高效能自动化港口数字化码头智慧港航,中国人工智能企业CIMCAI世界港航人工智能领军者,成熟港口码头人工智能产品中国人工智能企业

打造高效能自动化港口数字化码头智慧港航,中国人工智能企业CIMCAI中集飞瞳世界港航人工智能领军者,成熟港口码头人工智能产品全球顶尖AI科技CIMCAI成熟AI产品全球前三船公司及港口落地,包括全球港口/堆场智能闸口验箱,全球港口岸边…

Vulnhub系列:Raven 1

该篇为Vulnhub系列靶机渗透,本次靶机存在4个flag。下面开始我们今天的渗透之旅。Raven靶机有很多种思路,我将对其进行一一整理。首先进行信息收集,利用arp-scan和nmap,进行靶机的ip及端口扫描发现了22、80、111端口。下面访问80端…

【LeetCode】剑指 Offer 23. 链表中环的入口节点 p139 -- Java Version

题目链接:https://leetcode.cn/problems/c32eOV/ 1. 题目介绍(23. 链表中环的入口节点) 给定一个链表,返回链表开始入环的第一个节点。 从链表的头节点开始沿着 next 指针进入环的第一个节点为环的入口节点。如果链表无环&#x…

怎么清空回收站?3分钟解决!

真实案例:回收站清空不了怎么办?怎样清空回收站里的文件? “各位大神,怎么恢复回收站里清空的文件?我按照百度上的方法,还是不行。” 当你在电脑上删除文件时,它们通常会被移到回收站&#xf…

mpi4py 运行过程中出现Read -1, expected xxx, errno = 1 解决方案

目录 问题描述 代码1(串行) 代码2(并行) 代码2执行时所用指令 错误信息 解决方案 解决方案1 解决方案2 问题描述 今天正在学习使用mpi4py,在对比运行以下2个代码时疯狂报错: 代码1(串…