js数组浅拷贝和深拷贝demo

最新推荐文章于 2023-08-06 16:00:58 发布
最新推荐文章于 2023-08-06 16:00:58 发布
阅读量148 收藏
点赞数
分类专栏： js浅拷贝和深拷贝 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45398848/article/details/105141089
版权

数组和对象一样，是引用数据类型
在这里插入图片描述
因为指向同一块栈区域，所以当修改arr2时，arr1数组也会发生变化，上图代码在控制台输出结果为：
在这里插入图片描述
解决方法：
数组浅拷贝，可以用concat、slice方法返回一个新数组的特性来实现拷贝
在这里插入图片描述
控制台输出结果为：
在这里插入图片描述
可以看到，arr1数组不会因arr2数组改变而改变。

对象深拷贝：obj2 = JSON.parse(JSON.stringify(obj1)) 可实现对象深拷贝

浅拷贝方法只适用于数组元素是基本类型，如果数组中有对象或者数组，需要进行深拷贝，下面是深拷贝一个通用方法，实现思路：拷贝的时候判断属性值的类型，如果是对象，继续递归调用深拷贝函数。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200327145441897.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mzk4ODQ4,size_16,color_FFFFFF,t_70
控制台输出结果为：
在这里插入图片描述
可以看到，arr1修改数组中对象的值，arr2并没有随之改变，问题解决。

我要o泡我要o泡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js数组拷贝
xieqiuyuelx的博客
02-18 6937
1、数组的直接赋值属于数组的浅拷贝，JS存储对象都是存内存地址的，所以浅拷贝会导致新数组和旧数组共用同一块内存地址，其中一个数组变化，另一个数组也会相应的变化。 var a =[1,2,3];var b=a;a[0]=30;console.log(a,b); 结果： [30, 2, 3] [30, 2, 3] 2、数组内部不含有引用类型，使用slice() 、concat() 和 assign() 方法都属于数组的深拷贝，一个数组变化，另一个数组不受影响。 数组的concat方法 var a=[..
前端深拷贝浅拷贝的问题
01-20
在前端开发中，深拷贝和浅拷贝是两个重要的概念，它们关乎到对象和数组复制的机制。当需要创建一个原始对象或数组的副本，而不希望改变原始数据时，就需要考虑这两种拷贝方式。 首先，浅拷贝是创建一个新对象，这个...
js 深拷贝与浅拷贝Demo
qq_14954259的博客
02-28 208
//浅拷贝 var p={ name:'张三', age: 15, copy:function(){ var temp={}; for(var k in this){ temp[k]=this[k]; } return temp; } } var p2=p.copy(); // 深拷贝 function deepCopy(){ var temp={}
js 输出数组_14 个拷贝数组的 JS 技巧
weixin_39876650的博客
12-03 172
为了保证的可读性，本文采用意译而非直译。数组拷贝经常被误解，但这并不是因为拷贝过程本身，而是因为缺乏对 JS 如何处理数组及其元素的理解。JS 中的数组是可变的，这说明在创建数组之后还可以修改数组的内容。这意味着要拷贝一个数组，咱们不能简单地将旧数组分配给一个新变量，它也是一个数组。如果这样做，它们将共享相同的引用，并且在更改一个变量之后，另一个变量也将受到更改的影响。这就是我们需要克隆这个数组的...
Python的赋值、深拷贝与浅拷贝的区别详解
09-17
在Python编程语言中，了解对象的赋值、深拷贝和浅拷贝是至关重要的，因为这直接影响到程序中数据的处理和预期行为。以下是对这些概念的详细解释： 1. **Python直接赋值** 当我们将一个对象赋值给另一个变量时，如`...
前端JavaScript 数组翻转 demo
最新发布
12-24
前端JavaScript 数组翻转
javascript深拷贝
08-10
javascript深拷贝demo，有封装好的深拷贝函数和调用的demo
js中数组的拷贝
qq_40085888的博客
12-16 260
参考博客: https://www.cnblogs.com/matthew-2013/p/3524297.html (ps: 二维数组及以上要考虑深度拷贝. 如博客中自定义的放大deepCopy,获取直接使用jquery提供的. ) var newColumns = $.extend(true,[],columns); //拷贝数组 同样, 对象涉及到多层信息的话, 也要考虑深层拷贝 ...
js中的数组拷贝（浅拷贝，深拷贝）
王俊的博客
12-03 4万+
问题 今天写代码时需要拷贝一个内容会变化的数组，使用了=赋值，slice()，concat()方法都不行，修改了原数组后拷贝数组也变了，原因是这个数组内容是object，而object是引用类型，需要使用深拷贝，最后使用var newArr = JSON.parse(JSON.stringify(arr));解决 浅拷贝&深拷贝 浅拷贝：如果数组元素是基本类型，就会拷贝一份，互......
JavaScript的深拷贝和浅拷贝
tang_bo_hu_2011的专栏
11-22 384
在使用JavaScript对数组进行操作的时候，我们经常需要将数组进行备份，事实证明如果只是简单的将它赋予其他变量，那么我们只要更改其中的任何一个，然后其他的也会跟着改变，这就导致了问题的发生。 方法一：js的slice函数 对于array对象的slice函数，  返回一个数组的一段。（仍为数组）  arrayObj.slice(start, [end])   参数  arrayO
JavaScript数组拷贝方法
weixin_44242600的博客
04-22 681
扩展运算符（浅拷贝） ES6的扩赞运算符。该方法不能有效的拷贝多维数组。数组/对象值的拷贝是通过引用而不是值复制。 var arr = [1, 2, 3]; var arrCopy = []; arrCopy = [...numbers]; // 拷贝数组修改原数组不受影响 arrCopy.push(4); console.log(numbers, numbersCopy); // [1, 2,...
JS中常用的数组拷贝技巧
Amelian的博客
08-06 1489
我们都知道，数组也是属于对象，在JS中对象的存储方式则是引用的方式。我们想要拷贝一个数组，就不能只是变量之前的赋值拷贝，这样他们将共享同一个引用，而数组又具有可变性，所以无法将原数组和拷贝的数组的数据分隔开。那么接下来将介绍如何对数据进行深层拷贝，使得原数组和拷贝数组的数据分隔开来。
深拷贝和浅拷贝实例理解加深以及细节
zx980414k的博客
09-28 193
列表传递地址需特别注意 要熟悉列表内存图，才能更好理解下面这个情况 list01 = ["张无忌","赵敏"] #list01中存放的是列表["张无忌","赵敏"]的地址 list02 = list01 #同理这是list01把存放的列表["张无忌","赵敏"]的地址交给list02 list01[0] = "无忌" #这段通过list01改变了列表的内容，而list02存放的内容是这个列表的地址，这个列表内容变了，所以print(list02[0])同样也会变 print(list02[0])
js数组中深拷贝的方法
热门推荐
罗布泊丶镜像人的博客
06-06 4万+
一、什么是浅拷贝 　　在js当中，我们常常遇到数组复制的的情况，许多人一般都会使用“=”来直接把一个数组赋值给一个变量，如 1 var a=[1,2,3]; 2 var b=a; 3 console.log(b);　　//输出的是1,2,3 4 a[2]=0; 5 console.log(b);　　//输出的是1,2,0 把数组a用等号“=”的形式复制给变量b，这种就是js数组的浅拷贝。然...
浅拷贝和深拷贝
qq_38327769的博客
03-10 818
一：定义 浅拷贝：浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址 ，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。 深拷⻉ ：深拷贝会拷贝所有的属性,并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。 二：为什么需要克隆 克隆的对象可能包含一些已经修改过的属性,保留着你想克隆对象的值，而new出来的
深拷贝、浅拷贝、引用拷贝
qq_43227733的博客
02-18 583
跟着小欢子把深拷贝、浅拷贝、引用拷贝彻底分清楚吧！
深拷贝浅拷贝的demo
06-10
深拷贝和浅拷贝都是复制一个对象，区别在于复制后的对象与原对象是否共享同一内存地址。深拷贝会复制出一个新的对象，与原对象不共享内存地址，而浅拷贝只是复制了一个指向原对象的引用，两个对象共享同一内存地址。 以下是深拷贝和浅拷贝的示例代码： ```javascript // 浅拷贝示例 let obj1 = { name: 'Alice', age: 20, skills: ['JavaScript', 'Vue', 'React'] } let obj2 = Object.assign({}, obj1) // 使用 Object.assign() 方法进行浅拷贝 obj2.age = 21 // 修改 obj2 的 age 属性 obj2.skills.push('Angular') // 修改 obj2 的 skills 属性 console.log(obj1) // { name: 'Alice', age: 20, skills: [ 'JavaScript', 'Vue', 'React', 'Angular' ] } console.log(obj2) // { name: 'Alice', age: 21, skills: [ 'JavaScript', 'Vue', 'React', 'Angular' ] } // 可以看到，修改了 obj2 的属性后，obj1 的 skills 属性也被修改了，这是因为浅拷贝只是复制了一个指向原对象的引用，两个对象共享同一内存地址。 // 深拷贝示例 let obj3 = { name: 'Alice', age: 20, skills: ['JavaScript', 'Vue', 'React'] } let obj4 = JSON.parse(JSON.stringify(obj3)) // 使用 JSON.parse() 和 JSON.stringify() 方法进行深拷贝 obj4.age = 21 // 修改 obj4 的 age 属性 obj4.skills.push('Angular') // 修改 obj4 的 skills 属性 console.log(obj3) // { name: 'Alice', age: 20, skills: [ 'JavaScript', 'Vue', 'React' ] } console.log(obj4) // { name: 'Alice', age: 21, skills: [ 'JavaScript', 'Vue', 'React', 'Angular' ] } // 可以看到，修改了 obj4 的属性后，obj3 的属性没有被修改，这是因为深拷贝会复制出一个新的对象，与原对象不共享内存地址。 ``` 需要注意的是，深拷贝虽然可以解决浅拷贝的问题，但是由于深拷贝会递归地复制对象的所有属性，所以可能会导致性能问题，特别是在处理大型复杂对象时。因此，需要根据具体情况选择合适的拷贝方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值