js深拷贝与浅拷贝

2023-10-27

区别: 浅拷贝只是增加了一个指针指向已存在的内存地址,仅仅是指向被复制的内存地址,如果原地址发生改变,那么浅拷贝复制出来的对象也会相应的改变。深拷贝是增加了一个指针并且申请了一个新的内存,使这个增加的指针指向这个新的内存。

浅拷贝

一、JavaScript 存储对象都是存地址的,所以浅拷贝会导致 ab 指向同一块内存地址。
数组的复制其实相当于复制了索引,改变其中一个变量,其他引用也会随之改变。

var a = [1,2,3];  
var b = a;  
b[0] = 4;  
// a 为 4 2 3  
// b 为 4 2 3  

var a = [1,2,3];
var b = a;
b[0] = 4;
// a 为 4 2 3
// b 为 4 2 3

当传递一个对象(在 javascript 里数组不是简单数据类型,而是对象)到一个函数,如果在函数内部改变了参数的内容,在函数外部这个变化是可见。

var a = [1,2,3];
function test(a){
  a[0]=4;
  return a;
}
test(a);
// a 为 [4,2,3]

二、Object.assign()方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。

案例一:

const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b // 2

案例二:

var person = {
  id: '123',
  name: {
    firstName:'zhang',
    lastName: 'san'
  },
  sex: 'man',
}
var person2 = Object.assign({}, person)
person2.name.lastName = 'qiang'

/* 
person 为 {
  id: '123',
  name: {
    firstName:'zhang',
    lastName: 'qiang'
  },
  sex: 'man',
}

person2 为 {
  id: '123',
  name: {
    firstName:'zhang',
    lastName: 'qiang'
  },
  sex: 'man',
}
*/

上面代码中,源对象 obj1a 属性的值是一个对象,Object.assign() 拷贝得到的是这个对象的引用。这个对象的任何变化,都会反映到目标对象上面。

深拷贝

slice 函数
concat 函数

这两个函数的原理都是返回数组的一个副本(相当于另外开辟内存空间),所以不会改变数组本身的值。

通常情况下,我们也会采用 JSON.parse(JSON.stingify(obj)) 方法深拷贝。

原理:利用 JSON.stingify 将js 对象序列化(JSON字符串),再使用 JSON.parse 来反序列化(还原)js 对象。但以下几点不适用该方法:

  • 如果 obj里面有时间对象,则 JSON.stringify 后再 JSON.parse 的结果,时间将只是字符串的形式。而不是时间对象;
  • 如果 obj 里有 RegExpError 对象,则序列化的结果将只得到空对象;
  • 如果 obj 里有函数,undefined,则序列化的结果会把函数或 undefined 丢失;
  • 如果 obj 里有 NaNInfinity-Infinity,则序列化的结果会变成 null
  • JSON.stringify() 只能序列化对象的可枚举的自有属性,例如 如果 obj 中的对象是有构造函数生成的, 则使用JSON.parse(JSON.stringify(obj)) 深拷贝后,会丢弃对象的 constructor
  • 如果对象中存在循环引用的情况也无法正确实现深拷贝;

参考文章

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js深拷贝与浅拷贝 的相关文章

  • TOMCAT配置:参数大小maxPostSize,参数个数maxParameterCount

    在更新了JSON校验器后 理论上不再存在问题 但是在使用JSON传递表单数据进行保存时依然出现了保存异常的情况 前台数据为7200个JSONObject组成的JSONArray 大小约为1 83M 其他参数若干 在参数传递到后台时发现后台并
  • 最新的Vivado安装、使用教程(2022/12/31)

    本文主要参考了黑金社区提供的资料 整理而成 目录 1 Vivado 开发环境 1 1 Vivado 软件介绍 1 2 Vivado 软件版本 2017 4比较稳定 2 Vivado 软件 Windows 下安装 3 重新安装驱动 4 大功告

随机推荐

  • 中位数(C语言)

    Description 计算有限个数的数据的中位数的方法是 把所有的同类数据按照大小的顺序排列 如果数据的个数是奇数 则中间那个数据就是这群数据的中位数 如果数据的个数是偶数 则中间那2个数据的算术平均值就是这群数据的中位数 现在给出n个正
  • Go语言最全面试题,拿offer全靠它,附带免积分下载pdf

    面试题文档下链接点击这里免积分下载 go语言入门到精通点击这里免积分下载 文章目录 Go 基础类 GO 语言当中 NEW 和 MAKE 有什么区别吗 PRINTF SPRINTF FPRINTF 都是格式化输出 有什么不同 GO 语言当中数
  • xss-level1

    首先搭建xss靶场 打开浏览器输入地址来到第一关 这里我先查看了一下源代码 先试一下弹出会话框 name lt
  • 程序跑飞的如何查问题

    在下这厢有礼了 最近一直在调试公司的代码 调的我有点慢 给自己总结一下 我是在FPGA上调试 一个通信交互的工程 我遇到程序跑飞的无非是三种情况 1 数组越界 就是数组的大小只有array 100 但是那你用了array 500 产生越界
  • rk3368 开机内核启动不了

    Platform RK3368 OS Android 6 0 Kernel 3 10 0 电源管理芯片用的是配套的rk818 经测量发现板子在上电启动时 u boot阶段与kernel阶段dcdc电压不一样 从uboot切换到kernel时
  • 矩阵特征值与行列式、迹的关系

    矩阵的特征值之和等于矩阵的行列式 矩阵的特征值之积等于矩阵的迹 简单的理解证明如下 1 二次方程的韦达定理 请思考 x 2 bx c 0 这个方程的所有根的和等于多少 所有根的积等于多少 2 把二次方程推广到 N 次
  • Linux下安装opencv with-ffmpeg解决无法读取视频的问题

    Linux下安装opencv with ffmpeg解决无法读取视频的问题 参考文章 1 Linux下安装opencv with ffmpeg解决无法读取视频的问题 2 https www cnblogs com haiyang21 p 1
  • 求最大公约数,最小公倍数(c++)

    文章目录 最大公约数 质数和合数 公约数 计算最大公约数 辗转相除法 最小公倍数 最大公约数 质数和合数 质数也称素数 指大于1 并且除了1和它自己 不能被任何其他自然数整除的数 除了1和质数的其他自然数称为合数 合数必定可以分解成2个或以
  • Spring Cloud中的服务注册和发现是怎样实现的?Spring Boot和Spring Cloud的关系是怎样的?Spring的核心容器包括哪些模块?Spring的Bean作用域有哪些?它们的区

    1 Spring Cloud中的服务注册和发现是怎样实现的 在Spring Cloud中 服务注册和发现是通过Eureka来实现的 Eureka是Netflix开源的一个服务治理组件 用于实现服务注册和发现的功能 具体来说 服务的提供方会在
  • vue3使用jodit富文本编辑器,自定义各项配置及组件封装

    目录 常用配置 设置中文 字体设置 CDN的引用 图片上传 对编辑器中生成的元素添加默认属性 组件封装 本文使用时的版本 vue 3 2 36 jodit 3 24 7 Jodit 是国外编写的一个功能强大的富文本编辑器 有常规版本和PRO
  • “数据库事务(Database Transaction)

    事务的使用 关于事务 我今天要把自己放在一个初学者的心态来写这篇文章 之前几篇文章大多讲的是对于Winner的应用 今天要从根本上来讲 一下 事务 以及事务在Winner中的应用 首先从基础讲起 什么是 事务 事务能帮我们解决哪些问题 摘录
  • 每日一解 戳气球(困难的动归)

    题目 戳气球 有 n 个气球 编号为0 到 n 1 每个气球上都标有一个数字 这些数字存在数组 nums 中 现在要求你戳破所有的气球 如果你戳破气球 i 就可以获得 nums left nums i nums right 个硬币 这里的
  • Unit Test 5--编写第一个单元测试

    大家好 我是神韵 是一个技术 生活博主 出文章目的主要是两个 一是好记忆不如烂笔头 记录总结中提高自己 二是希望我的文章可以帮到大家 欢迎来点赞打卡 你们的行动将是我无限的动力 本篇主题是 编写第一个单元测试 其它文章链接 Unit Tes
  • 几个小程序

    1 求变量val中1的个数 方法1 逐个去比较 int getNum1 int val int num 0 while val num val 0x01 val val gt gt 1 return num 方法2 使用x x 1 int
  • pycharm中通过命令行运行程序,进行程序调试

    1 点击菜单栏run gt edit configurations 2 如果命令行输入python ecode py users items 则在parameters框中输入 users items
  • Ubuntu下启动idea的方法

    最近在ubuntu下部署网站 使用IDEA进行开发 但是平时使用linux比较少 所以一路上踩到了很多坑 光是idea的启动就折腾了半天 后来发现是输入的命令有问题 安装好IDEA以后 应该进入安装目录的bin文件夹下 关键点来了 linu
  • K8S 网络问题导致 ns 相关的服务不能互相访问

    背景 近期重新部署了一套K8S环境 是基于本机虚拟机 采用 Kuboard Spray 方式 使用 KuboardSpray 安装kubernetes v1 23 1 Kuboard 安装成功后 并无感觉不妥 看到 pod 状态都是 run
  • 初探强化学习

    1 引言 人生中充满选择 每次选择就是一次决策 我们正是从一次次决策中 把自己带领到人生的下一段旅程中 在回忆往事的时候 我们会对生命中某些时刻的决策印象深刻 还好当时选择了读研 毕业后找到了一份自己喜欢的工作 如果当初接受那家公司的off
  • Docker : Docker 查看容器 IP 地址以及相关信息

    1 美图 2 查看Docker的底层信息 docker inspect 会返回一个 JSON 文件记录着 Docker 容器的配置和状态信息 base lcc lcc docker inspect es4 Id 4b1215a95bf712
  • js深拷贝与浅拷贝

    区别 浅拷贝只是增加了一个指针指向已存在的内存地址 仅仅是指向被复制的内存地址 如果原地址发生改变 那么浅拷贝复制出来的对象也会相应的改变 深拷贝是增加了一个指针并且申请了一个新的内存 使这个增加的指针指向这个新的内存 浅拷贝 一 Java