JS深拷贝--用map方法

已于 2022-04-28 23:41:40 修改
阅读量3.4k 收藏 1
点赞数
文章标签： 前端 vue.js
于 2022-04-24 11:09:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Nikki_u/article/details/124378149
版权
本文探讨了深拷贝和浅拷贝的概念，强调了深拷贝在处理复杂数据类型时的重要性。通过使用Map方法，文章详细介绍了如何在JavaScript中实现深拷贝，包括如何处理循环引用问题，并提供了利用Map和Math.max实现的最大id值加1的示例。此外，还讨论了项目中使用第三方库如lodash进行深拷贝的原因。
摘要由CSDN通过智能技术生成

深拷贝和浅拷贝

1、什么是深拷贝，为什么要有深拷贝？

复杂数据类型进行遍历，拷贝内部的基本值而不是引用地址

在js中，有简单数据类型和复杂数据类型。复杂数据类型在栈中存储的时候仅仅是一个引用地址，如果拷贝的时候，只拷贝了地址，修改拷贝的数据会影响之前的数据

所以需要用深拷贝把数据拷贝出来

2、什么是浅拷贝

只拷贝了一层，对于复杂数据类型只拷贝了地址

3、实现拷贝：

如果是简单数据类型，直接拷贝。如果是复杂数据类型，复制地址。

循环引用的问题？构建一个map对象，缓存已经拷贝过的复杂数据类型，如果递归的时候再遇到地址相同的数据，直接复用缓存的值不去递归

4、快问快答

问：公司的深拷贝都是自己写的吗？

答：不是项目一般会使用lodash第三方库。

问：为什么要使用第三方库？

第三方库做了很多兼容性的条件判断，使用更加安全

使用map方法实现深拷贝

function deepCopy(data) {
  const map = new Map() // 键可以是一个对象
  function dp(data) {
    const existObj = map.get(data) 
    // 看一下当前需要处理的数据是否已经被处理过(只要处理过了，都会通过map缓存起来)
    if (existObj) {
      //  已经被处理过了，第二次见到这个对象了(相同的引用的地址)
      //  只要返回上次处理之后的结果
      return existObj
    }
    let result = Ar
最低0.47元/天 解锁文章
Nikki_u
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
深拷贝.js(考虑最全的深拷贝函数)
06-27
js考虑最完善的深拷贝函数,可以深拷贝引用对象和基本对象
JavaScript实现浅拷贝与深拷贝的方法分析
12-01
一些库如lodash提供了`_.cloneDeep()`函数来实现深拷贝，而ES6的`Object.assign()`和`Map`、`Set`的构造函数也可以帮助实现深拷贝，但都需要配合其他方法处理复杂情况。 8. **通用深拷贝函数**： 编写一个通用的...
Js实现map和深拷贝map
热门推荐
vipp666的博客
10-30 1万+
深拷贝和浅拷贝的区别 1.浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用 2.深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用” 为什么要使用深拷贝？ 我们希望在改变新的数组（对象）的时候，不改变原数组（对象） 深拷贝的要求程度 我们在使用深拷贝的时候，一定要弄清楚我们对深拷贝的要求程度：是仅“深...
Map 深、浅拷贝
最新发布
小羊的 Blog
07-03 229
Map 深、浅拷贝
js实现深拷贝Map
qq_45448704的博客
06-26 1329
js实现深拷贝map
js实现深拷贝
高先生的猫
03-24 379
通常浅拷贝就能解决大部分问题，但是只解决了第一层的问题，如果接下去的值中还有对象的话，那么我们需要使用深拷贝。 通过 JSON 转换实现 缺点： 对于 function、undefined，会丢失这些属性。 对于 RegExp、Error 对象，只会得到空对象 对于 date 对象，得到的结果是 string，而不是 date 对象 对于 NaN、Infinity、-Infinity，会...
JavaScript实现深拷贝
qq_46345868的博客
10-03 491
js实现深拷贝
js 深拷贝 兼容Map、Symbol类型
初心
09-21 959
除了基本数据类型（null、string、boolean、undefined、number、symbol），引用数据类型中 如果对象中不存在时间类型和正则表达式等类型对象，则可用简单的JSON序列化进行转化。2、递归深拷贝常用数据类型。3、递归深拷贝所有数据类型。
JavaScript数组深拷贝和浅拷贝的两种方法
10-26
而使用深拷贝方法，原始数组则不会受到影响。 首先来看浅拷贝，以最常见的赋值操作为例。如果我们把一个数组赋值给另一个变量，这两个变量实际上指向的是同一个数组对象。这意味着，当我们修改任何一个变量中的数组...
js代码-深拷贝优化
07-16
在JavaScript中，深拷贝是一种创建新对象并复制原始对象所有属性（包括嵌套对象）的方法，以便修改拷贝的对象不会影响源对象。本话题主要关注如何优化JavaScript中的深拷贝实现，以提高性能和效率。 一、浅拷贝与深...
js代码-js深拷贝
07-14
在JavaScript中，深拷贝和浅拷贝是两种常见的数据复制方法。它们之间的区别在于拷贝的层次和对象引用的处理。在这个主题中，我们将深入探讨JavaScript中的js深拷贝，以及如何在实际编程中实现它。 首先，让我们理解...
js 自带的 map() 方法全面了解
11-25
1. 方法概述 map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。 2. 例子 2.1 在字符串中使用map 在一个 String  上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组： var map = Array.prototype.map var a = map.call("Hello World", function(x) { return x.charCodeAt(0); }) // a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] 2.2 易犯错误 通常情况
js实现复制功能(多种方法集合)
11-29
1.实现点击按钮，复制文本框中的的内容 [removed] function copyUrl2() { var Url2=document.getElementById("biao1"); Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好，可贴粘。"); } [removed] <textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea> <input type="button" o
js代码-实现一个基本的深拷贝
07-16
在JavaScript中，深拷贝是一种创建对象副本的方法，其中新副本与原始对象具有相同的数据，但它们在内存中是独立的。这意味着修改副本不会影响原始对象。深拷贝对于处理复杂对象，特别是包含嵌套对象或数组的情况非常...
JS的深浅拷贝
Falicitas的博客
10-04 391
深拷贝会开辟新的栈，两个对象对应两个不同的地址，修改对象A的属性，并不会影响到对象B。以赋值的形式拷⻉引⽤对象，仍指向同⼀个地址，修改时原对象也会受到影响。
JS手写——实现深拷贝（考虑Map、Set、Date、RegExp、循环引用）
ZKH129的博客
08-20 446
【代码】JS手写——实现深拷贝（考虑Map、Set、Date、RegExp、循环引用）
js中利用map拷贝数组
qq_43050327的博客
03-01 439
var mapArr = [1,2,33,4,5,6] var newArr = mapArr.map((item)=>{ return item }) mapArr[1]=88; console.log(mapArr) console.log(newArr)
js实现深拷贝(使用递归)
weixin_45272209的博客
03-23 1071
js实现深拷贝(使用递归) 判断是否是引用类型 ？ typeof 返回结果(function或object ) 有一个特殊的基础类型 null他typeof返回结果是 object（注意） 若是基本类型直接return 若是引用类型则 进行分析 arr 就用map遍历并使用递归 对象 则使用 forin遍历 并递归 函数 如何实现拷贝函数还在研究中 // 实现深拷贝 /* * 1. 判断是否是引用类型 ？？ typeof (function、object / ) *
深拷贝数组的方法js
08-26
在 JavaScript 中，可以使用以下方法来进行深拷贝数组： 1. 使用 Array.from() 方法： ```javascript const arr = [1, 2, 3]; const cloneArr = Array.from(arr); ``` 2. 使用展开运算符（spread operator）： ```javascript const arr = [1, 2, 3]; const cloneArr = [...arr]; ``` 3. 使用数组的 map() 方法： ```javascript const arr = [1, 2, 3]; const cloneArr = arr.map(item => item); ``` 4. 使用 JSON 序列化和反序列化： ```javascript const arr = [1, 2, 3]; const cloneArr = JSON.parse(JSON.stringify(arr)); ``` 需要注意的是，使用 JSON 序列化和反序列化的方法可以实现深拷贝数组，但是对于包含函数、循环引用等特殊对象时可能会出现问题。此外，在处理大型嵌套数组时，上述方法也可能存在性能方面的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值