JavaScript浅克隆和深克隆

浅深克隆解析
最新推荐文章于 2023-03-30 14:35:35 发布
转载 最新推荐文章于 2023-03-30 14:35:35 发布 · 194 阅读 · 0
文章标签：

#JavaScript

本文详细解释了浅克隆和深克隆的概念，浅克隆仅复制对象的外部一层，而深克隆会递归复制所有层级的对象，避免了原始对象的引用问题。通过JSON.stringify和JSON.parse的组合使用，实现了一个便捷的深克隆方法。

一、浅克隆
浅克隆是指对象只会被克隆最外部的一层,对于更深层的对象,则依然是通过引用指向同一块堆内存区域。
在这里插入图片描述
debug结果:在这里插入图片描述
二、深克隆
JSON对象parse方法可以将JSON字符串反序列化成JS对象，stringify方法可以将JS对象序列化成JSON字符串,这两个方法结合起来就能产生一个便捷的深克隆。
在这里插入图片描述
debug结果:
在这里插入图片描述
我们可以很看到,oldObj.c.h与oldObj.c.h不相等了,这表明他们指向了不同的一段堆内存,如果对newObj.c.h进行修改,则oldObj.c.h不受印象。

视频教程推荐：http://yun.itheima.com/course/375.html?mcgcsdn

JavaScript浅层克隆与深度克隆示例详解
10-14
但对于引用类型（如Array、Object、function等），浅克隆只会复制引用，新旧对象依然共享同一个堆内存中的对象。这意味着，如果其中一个对象修改了引用类型的属性，另一个对象的相应属性也会被改变。 ```javascript...
JavaScript深拷贝和浅拷贝概念与用法实例分析
10-18
在JavaScript编程中，拷贝是一个常见的操作，而区分深拷贝和浅拷贝对于理解程序行为和预测程序结果至关重要。本篇将详细讲解浅拷贝与深拷贝的概念、原理、用法，以及如何在实际编码中利用这些概念。 首先，我们讨论...
js的深克隆和浅克隆
weixin_39514724的博客
06-10 2321
克隆的概念 深克隆 所有元素或属性完全复制，与原对象完全脱离，也就是说所有对新对象的修改都不会映射到原对象中 浅克隆 原始类型为值传递，对象类型仍为引用传递 函数 函数是对象类型，但函数是一等公民，函数克隆通过浅克隆即可实现。 **原因：**函数克隆会在内存中单独开辟一块空间，互不影响。 针对数组实现深复制 用数组的方法concat一个空数组 var a = [1,2,3]; var b = []...
js的深克隆与浅克隆
qq_37167086的博客
12-27 251
1.浅克隆 直接将存储在栈中的值赋值给对应变量，如果是基本数据类型，则直接赋值对应的值，如果是引用类型，则赋值的是地址。 function clone(Origin,Target){ var Target = Target || {} for(var prop in Origin){ Target[prop] = Origin[prop...
JS深克隆和浅克隆
hate_like的博客
03-30 458
如果属性是基本类型，克隆的就是基本类型的值；如果属性是内存地址（引用类型），比如数组或者类对象，深克隆会新建一个对象空间，然后克隆里面的内容，所以它们指向了不同的内存空间。改变其中一个，不会对另外一个也产生影响。：如果属性是基本类型，克隆的就是基本类型的值；如果属性是内存地址（引用类型），克隆的就是内存地址 ，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。
JS中的深克隆与浅克隆
qq_42836879的博客
09-09 457
JS中的深克隆与浅克隆 浅克隆是原始类型为值传递，对象类型仍为引用传递，与原数据公用一套内存地址，修改一处别的也会受到影响。 深克隆是所有元素或属性完全复制，与原对象完全脱离，也就是说所有对新对象的修改都不会映射到原对象中。 JS实现浅克隆 var lilei={ sname:"li lei", sage:12, address:{ city:"xian", street:"未央区" } } function clone(oldObj..
js-深克隆，浅克隆
qq_39396275的博客
08-15 770
1深克隆 <script type="text/javascript"> var obj={ name:"abc", age:123, card:[' visa','master'], wife:{ name:"bcd", son:{ ...
1. 浅克隆和深克隆的区别
m0_49456900的博客
03-09 2294
(1)、区别 浅克隆：克隆出来的数据并不能完全脱离原数据，克隆前与克隆后的变量各自的变化会相互影响。这是因为引用变量存储在栈中，而实际的对象存储在堆中。每一个引用变量都有一根指针指向其堆中的实际对象。即当一个变量值改变时，另一个变量也会跟着发生变化。 深克隆：所有元素或属性均完全复制，与原对象完全脱离，也就是说所有对于新对象的修改都不会反映到原对象中。这是因为原始变量之间的赋值操作本质上就是当一个原始变量把值赋给另一个原始变量时，只是把栈中的内容复制给另一个原始变量，在这种操作下，引用变量指向的将不再是堆
web前端高级JavaScript - 数组和对象的浅克隆与深克隆
lixiaosenlin的专栏
11-18 6326
浅克隆 浅克隆是指：只克隆数组/对象的第一层级内容（开辟新的堆内存），而第二层级及以上层级的内容则直接引用（使用原来第二层级及以上层级的堆内存）。如果对克隆后对象的二级或以上层级进行修改，那么克隆前对象的二级或以上层级也会跟着被修改。 例如：现有一个对象obj1对应堆内存地址0x000，obj1对象中还有个子对象obj1_1对应堆内存0x001，现在想对obj1对象进行浅克隆，则会创建一个新的对象obj2对应新的堆内存地址0x002，对于对象obj1中的基本类型数据则会直接拷贝到obj2中，而obj1中的
深克隆与浅克隆的区别
joyouscola的博客
04-26 2929
浅克隆 浅克隆是指在克隆对象时，对于基本数据类型的变量会重新复制一份，而对于引用类型的变量只是对引用进行克隆。就是将栈中的值复制一份给新的变量，但是两个对象指向都是同一个地址，一个发生改变另外一个也发生改变。 看一下上面的例子，定义了一个arr数组，再将arr的值赋值给Arr，输出Arr，得出的值是arr的值，再通过Arr使用数组的方法添加进了一个数字，结果arr和Arr两个都输出是同一个数组。简单的来说，也就是定义一个Array数组名字叫arr，然后将arr的值复制一份给Arr，这里Arr和arr两个
js深度拷贝（克隆）与浅度拷贝（克隆）原理及应用
热门推荐
sunshine的博客
08-22 1万+
如果你想真正自己理解和运用深度克隆的话，首先必须要了解的就是js中的原始值和应用值，以及它们的储存位置及方式。这里简单的说一下，原始值呢是存储在栈里的，而且存储的是变量的实际值。引用值存储在堆里，且存储的是一个指针，该指针指向内存中的某个位置，该位置存储变量的实际值。 浅度拷贝 var a = 2 ; var a_copy = a ; a_copy = 3; console.log(a); ...
【JavaScript】深度解析深拷贝和浅拷贝的区别
GY的博客
11-21 1261
深拷贝和浅拷贝深拷贝和浅拷贝赋值和深/浅拷贝的区别浅拷贝的实现方式1. Object.assign()2. Array.from()3. 展开运算符...4. Array.prototype.concat()5. Array.prototype.slice()深拷贝的实现方式1.JSON.parse(JSON.stringify()) 深拷贝和浅拷贝 浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以如
浅拷贝和深拷贝
weixin_33920401的博客
05-22 113
浅拷贝：浅克隆之所以被称为浅克隆，是因为对象只会被克隆最外部的一层,至于更深层的对象,则依然是通过引用指向同一块堆内存.1.第一种方法:function shadowClone(o) { const obj = {}; for (let i in o) { obj[i] = o[i]; } return obj; } var oldObj = { a: 1, b...
JS浅克隆与深克隆
大灰狼的小绵羊哥哥的博客
04-23 8532
因为近日的项目需要用到对数组做深克隆，所以做一个简要介绍与总结。 一开始听说这个概念的时候吓一跳，觉得高深莫测，有点怕怕啊。完了了解一下，哦，原来就这玩意啊~~~ 那么什么是深克隆，什么是浅克隆呢？ 首先，克隆只针对对象、数组、函数等复杂数据。 浅克隆就是将栈内存中的引用复制一份，赋给一个新的变量，本质上两个指向堆内存中的同一地址，内容也相同，其中一个变化另一个内容也会变化
易懂js的浅克隆和深克隆原理
weixin_43348064的博客
05-02 2281
什么是克隆 其实js里的克隆跟生活里说的克隆是一样的。有一个本体，克隆出跟本体一摸一样的副体，当本体“受伤”时副体是不会“受伤”的，js的克隆也是如此。 来看下面代码 <script> var benti = { top: "铁头", leg: "大长腿", waist: "细腰", hand: "小手",...
js中深克隆与浅克隆
weixin_43663370的博客
12-08 1895
js中深克隆与浅克隆 参考：https://blog.youkuaiyun.com/sinat_17775997/article/details/70482279 最近的项目要做一个对表数据的增加，由于表的设计比较复杂：字段中存的数据是json格式，相当于表中表。8多说，上图。 显示规格及选项列表（复选框），并保存用户选择的结果 需要经过遍历添加规格： 添加完网络制式后，再加屏幕尺寸5.0，需要在之前的规...
Js实现深克隆和浅克隆的方法！
Wsh20210301的博客
08-07 1401
深克隆和浅克隆的定义 浅克隆定义： 直接将存储在栈中的值赋值给对应变量，如果是基本数据类型，则直接赋值对应的值，如果是引用类型，则赋值的是地址。 浅克隆代码： function lowClone(Clone){ let obj={}; for(let key in Clone){ obj[key]=Clone[key] } return obj; } let a = {
十分钟学会JavaScript深克隆与浅克隆
终生学习，终生成长
04-20 1542
什么是深克隆与浅克隆 浅克隆，即只克隆目标对象的第一层数据，如果对象的某些属性值又是引用类型值，则不进一步克隆它们，只是传递它们的引用。 与浅克隆对应的就是深克隆，即克隆目标对象的全貌，不论对象的属性值是否是引用类型值，都能将他们实现克隆。 能快速实现浅克隆的方法如下： arr1 = [...arr] arr1 = arr.slice() arr1 = arr.concat() obj1 = Object.assign({}, obj) 比如，以上的Object.assign()方法只克隆第一层，属于浅
JavaScript浅深克隆理解与实现
"JavaScript浅层克隆与深度克隆的概念、区别及实现方式" ...通过深入理解JavaScript的浅层克隆和深度克隆，开发者可以更好地管理数据状态，避免因意外修改导致的错误，提高代码的健壮性和可维护性。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值