前端 赋值、浅拷贝与深拷贝的区别

最新推荐文章于 2025-02-04 19:48:26 发布
原创 最新推荐文章于 2025-02-04 19:48:26 发布 · 382 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #javascript

本文详细解释了赋值、浅拷贝与深拷贝的概念及其在内存中的表现形式，介绍了各种实现拷贝的方法如Object.assign()、展开运算符、lodash.clone等，并讨论了递归在深拷贝中的应用。

1.赋值

赋值其实是将一个对象在栈中的地址赋给新的变量，而不是堆中的数据。也就是说两个对象指向了同一个存储空间，无论那个对象发生改变，都是改变存储空间的内容。

2.浅拷贝

重新再堆中创建内存，拷贝前后对象的基本数据类型互不影响

但拷贝前后对象的引用类型因为共享同一内存，所以会互相影响。

实现方式
Object.assign()
…object //展开运算符
lodash clone
concat等

3.深拷贝

从堆内存中开辟一个新的区域存放新的对象，进行递归拷贝，拷贝前后的两个对象互不影响

深拷贝需要使用递归方法，注意：非object类型、null、Date（日期类型）、RegExp（正则）都需要特别判断。

实现方式
$.extend
deepClone //使用递归

在这里插入图片描述

赋值、浅拷贝、深拷贝的含义、实现方法、总结
小黄呀呀呀的博客
07-06 852
基本数据类型：Boolean、String、Number、null、undefined 引用数据类型：Object、Array、Function、RegExp、Date等基本数据类型都是按值访问的，可以操作保存变量中的实际值 (2)引用数据类型的复制，是按引用传值 引用类型如Arrray、Object，不能直接操作对象的堆内存空间，都是直接按引用访问的，即保存在变量对象中的一个地址。 （1）只复制指向某个对象的指针，而不复制这个对象本身，新旧对象共享一块内存。 （2）基本数据类型直接复制值，引用数据类型（数
前端面试：浅拷贝和深拷贝的区别？
热门推荐
java小白翻身
03-08 2万+
浅拷贝（shallow copy）：只复制指向某个对象的指针，而不复制对象本身，新旧对象共享一块内存；   深拷贝（deep copy）：复制并创建一个一摸一样的对象，不共享内存，修改新对象，旧对象保持不变。...
深copy和浅copy区别
mimosa2008的博客
11-20 640
假设B复制了A，修改A的时候，看B是否发生变化： 如果B跟着也变了，说明是浅拷贝，拿人手短！（修改堆内存中的同一个值） 如果B没有改变，说明是深拷贝，自食其力！（修改堆内存中的不同的值） 浅拷贝（shallowCopy）只是增加了一个指针指向已存在的内存地址， 深拷贝（deepCopy）是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存， 使用深拷贝的情况下，释放内...
JavaScript中浅拷贝和深拷贝的区别和实现
weixin_33940102的博客
09-28 213
要理解 JavaScript中浅拷贝和深拷贝的区别，首先要明白JavaScript的数据类型 JavaScript有两种数据类型，基础数据类型和引用数据类型 基础数据类型：保存在栈内存中的简单数据段 ，有undefined，boolean，number，string，null引用数据类型：Array，对象，Function 保存在堆内存...
前端--浅拷贝和深拷贝区别。
weixin_46409887的博客
04-29 724
浅拷贝:（shallowCopy）只是增加了一个指针指向已存在的内存地址。 (例如:同一个地址其中一个改变，另一个也会被改变) 深拷贝:deepCopy）是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存。 (例如:同一个地址,申请加入一个新的地址,并且改变了地址方向，所有其中一个改变另一个也地址不会被改变) 区别: 深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实...
关于前端赋值、深拷贝、浅拷贝
王先生的博客
03-30 834
关于前端赋值、深拷贝、浅拷贝 一、赋值 赋值是将某一数据类型或对象赋给某一变量的过程，js中的数据类型分为基本数据和引用数据类型也就是对象类型 1.基本数据类型包括（null、undefined、number、string、boolean） 2.引用数据类型包括（array、object、function）使用typeof返回array的数据类型其实是object，因为在javascript中，array就是object 基本数据类型的赋值 let a = 20,b=a; console.lo
前端高频面试题-JavaScript中的浅拷贝和深拷贝
weixin_51063790的博客
04-23 819
这是因为a指向的堆内存中的值是二维数组，大数组中的小数组又是一个引用数据类型，保存的是地址，而不是值，即[1,3,4,0x1001]，而不是[1,3,4,[5,6]]。a赋值给b时，将[1,3,4,0x1001]赋值给了b，b指向的堆中的值中0x1001也指向了这片堆内存空间[5,6]。栈中a将堆内存地址0x001赋值给了b，b也指向了堆中的[1,3,4]。其实函数的拷贝可以用(1)方法中的ES6中的解构运算符...，因为如下，obj.c重新定义了一个函数，相当于在堆中重新开辟了一块空间存放新函数。
【前端面试3+1】03深拷贝浅拷贝、let和var、css盒模型、【有效括号】
qq_61798306的博客
03-27 729
CSS的盒模型是用来描述网页中元素布局的模型，它将每个元素看作是一个矩形的盒子，包含内容区域、内边距、边框和外边距。盒模型的主要作用是确定元素在页面中的大小和位置。
【面试常见问题】深拷贝与浅拷贝
c_wengy的博客
05-31 889
在技术面试中，深拷贝（Deep Copy）与浅拷贝（Shallow Copy）是考察JavaScript基础与理解对象复制机制的常见话题。掌握这两者不仅有助于解决实际开发中的数据隔离问题，还能在面试中展示你对JavaScript核心概念的深入理解。
深入 简单 直观 的理解 深拷贝 浅拷贝问题，以及如何实现深拷贝 浅拷贝，前端面试
weixin_51472145的博客
06-05 967
深入 简单 直观 的理解 深拷贝 浅拷贝问题，以及如何实现深拷贝 浅拷贝，前端面试
手撸代码面试题4-深拷贝浅拷贝
weixin_43956521的博客
12-07 243
// 浅复制：仅仅是指向被复制的内存地址，如果原地址发生改变，那么浅复制出来的对象也会相应的改变。 // 深复制：在计算机中开辟一块新的内存地址用于存放复制的对象。 // 实现深拷贝 主要利用了递归 function deepClone(obj){ let objClone = Array.isArray(obj)?[]:{}; if(obj && typeof obj==="object"){ for(key in obj){
前端js中深拷贝和浅拷贝区别
wkc1203的博客
04-03 426
基本类型：number,string,boolean,undefinded,null,symbol属于深拷贝 引用类型：object 深拷贝是将数据存储在栈中 浅拷贝是将数据存储在堆中，栈中存储的是只想堆中的地址 图示 实现深拷贝方式 1，写个函数遍历所有层级，一层一层的复制 2，应用json的stringify,parse来实现 function deepClone...
前端 | 浅拷贝&深拷贝
最新发布
2502_90366796的博客
02-04 2127
在前端开发中，我们经常需要复制对象或数组，但不同的复制方式可能会影响数据的完整性和应用的稳定性。本文将深入探讨浅拷贝（Shallow Copy）和深拷贝（Deep Copy）的区别、实现方式及适用场景。
前端深拷贝与浅拷贝区别
QQljh123456的博客
09-28 334
前端深拷贝和浅拷贝的区别 在日常工作中，可能有很多人像我一样，并没有系统的从基础层面学习前端知识，只是针对当前流行的框架进行简单了解后，根据官网的样例进行使用并完成指定的开发工作 首先根据自己的理解，深拷贝的概念只存在引用数据类型（object）中 数据类型：基本数据类型：Number,String,Boolean,Undefined,Null Symbol（ES6中新增，暂未学习使用）引用数据类型：Object（也就是对象类型Object type，比如：Object 、Arra...
[前端面试题]：深拷贝与浅拷贝的区别
WWEIZAI的博客
08-25 1323
浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。
前端的深拷贝和浅拷贝_深拷贝与浅拷贝的区别
weixin_39598941的博客
12-20 142
浅拷贝：所谓的浅拷贝就是复制一份引用数据类型的地址，当改变了内存中数据的某一个值得话，也会影响到另一个对象浅拷贝的方式：浅拷贝1var obj = {name:"张三",age:19,sex:"男"}var newObj = obj;newObj.name="李四";console.log(obj);//{name:"李四",age:19,sex:"男"}console.log(newObj);/...
前端 深拷贝和浅拷贝的异同
weixin_39407457的博客
12-28 1353
说到深拷贝和浅拷贝，相信熟悉C和Java的同学们经常涉及到这两个概念 现在以JavaScript为例，讨论深拷贝和浅拷贝 首先这里给大家写一段代码，大家思考，每个代码块的打印的结果应该是什么：var a=1,b; b=a; b++; console.log(“a,”+a); console.log(“b,”+b); ///////////////////// var c=[1,2,3
【2022前端进阶】赋值、浅拷贝和深拷贝（js / javascript）
Cyrios_ykx的博客
08-03 579
js中的8种数据类型和他们在内存中的分配形式，赋值、浅拷贝和深拷贝的区别，浅拷贝和深拷贝的多种实现方式
7、js讲解赋值、浅拷贝、深度拷贝的区别
伦伦的博客
08-16 266
一、赋值 赋值是将某一个属性或者对象赋给某一个变量的过程，分为“赋值”与“赋址” 1、基本数据类型：赋值，赋值之后两个变量互不影响 let object = "lunlun"; let object2 = object; console.log(object)// "lunlun" console.log(object2)// "lunlun" 2、引用数据类型：赋址，两个变量具有相同的引用，指向同一个对象，相互之间有影响 let object = ["2","33",["22",{name:"Copy
前端面试常考 | 浅拷贝与深拷贝
云创网络工作室官方账号
02-13 2239
面试高频考点JS中的深浅拷贝，以及在Vue中的使用深浅拷贝。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值