JS实现深拷贝的方法

最新推荐文章于 2024-07-12 09:36:48 发布
最新推荐文章于 2024-07-12 09:36:48 发布
阅读量266 收藏
点赞数 7
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mcdcakfke/article/details/136889703
版权
本文探讨了如何使用JSON.stringify和JSON.parse进行基本对象转换，以及它们的局限性。随后介绍了递归函数在深拷贝中的应用，最后提到使用第三方库lodash的cloneDeep方法及其性能考虑。
摘要由CSDN通过智能技术生成

一、JSON方法实现

（1）使用JSON.stringify将对象转换为json字符串形式,然后用JSON.parse将转换而来的字符串转换为原生js对象并赋值给另一个变量。

（2）缺陷：取不到值为 undefined 的 key；如果对象里有函数，函数无法被拷贝下来；无法拷贝Obj对象原型链上的属性和方法。

二、递归函数

使用递归的方式实现数组、对象的深拷贝

三、第三方库

（1）使用第三方库lodash中cloneDeep()方法

（2）lodash.cloneDeep()方法底层使用的本来就是递归方法。只是在外层又封装了一层cloneDeep的主体函数baseClone。

（3）如果不是原先项目中有使用 lodash 这个库的话，大可不必为了这一个功能而去引入它。不如写一个递归函数对于项目来说性能更好

前端小张丷
关注
  • 7
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JS实现数组深拷贝的方法分析
10-17
以下是对JS实现数组深拷贝方法的详细分析： 1. **浅拷贝**： - `slice()` 和 `concat()` 方法：这两个方法都可以实现浅拷贝，即创建一个新数组，但只复制数组的第一层元素。如果数组中包含对象或数组引用，新数组...
javascript深拷贝的原理与实现方法分析
10-20
为了实现深拷贝，我们需要创建一个全新的对象，然后逐个复制原始对象的属性值。对于复杂类型的属性，需要递归调用深拷贝函数来处理。以下是一个简单的深拷贝实现： ```javascript function deepClone(obj) { if ...
JS实现深拷贝的几种方法
前端学习笔记
05-27 4356
通过递归的方式深度遍历对象，将每个属性的值进行复制。需要处理被复制对象为值类型的情况以及属性值中包含对象的情况。需要注意的是，为了防止循环引用导致死循环，需要记录已经遍历过的对象。是一个一致性、模块化、高性能的。
4种实现JS深拷贝的方法
sunnyjingqi的博客
10-12 4666
上述的几种方式不管优缺点如何，共同点是只能拷贝对象的可枚举属性，对于不可枚举或者原型上的属性，却不能拷贝，但对于基本的使用来说，已经足够了。
js实现深拷贝
gaomuzhengxiong的博客
08-06 159
js中通过递归实现深拷贝
js实现深拷贝的常用方法
weixin_52326756的博客
02-20 387
利用JSON.stringify和JSON.parse实现深拷贝或利用lodach插件
js_三种方法实现深拷贝
weixin_46811890的博客
02-19 710
适用于需要完全独立于原始对象的场景，特别是当对象内部有引用类型时，为了避免修改拷贝后的对象影响到原始对象，就需要使用深拷贝。JSON.parse(text[, reviver]) 将一个符合JSON格式的字符串转换成JavaScript对象或数组。Lodash 的 __.cloneDeep 方法可以实现深拷贝，它能够处理各种复杂的数据类型和嵌套结构。JSON.stringify() 用于将JavaScript对象或值转换成一个JSON字符串。语法规范：_.cloneDeep(value)
js实现深拷贝的几种方式
jieyucx的博客
10-26 1514
综上所述，尽管JSON.stringify和JSON.parse可以完成一些简单对象的深拷贝，但在处理复杂或特殊类型的对象时存在一定的局限性。：通过JSON.stringify和JSON.parse进行序列化和反序列化会导致一些特定类型的信息丢失，例如日期对象被转换成字符串，正则表达式对象被转换成空对象。：相比其他深拷贝方法，使用JSON.stringify和JSON.parse进行深拷贝的性能较低，尤其是在处理大型对象或嵌套深的对象时，会消耗较多的时间和内存。方法，它提供了更强大和灵活的深拷贝功能。
【JavaScript】js实现深拷贝的方法
m0_68324632的博客
02-20 964
在js中我们想要实现深拷贝，首先要了解深浅拷贝的区别。 浅拷贝：只是拷贝数据的内存地址，而不是在内存中重新创建一个一模一样的对象（数组） 深拷贝：在内存中开辟一个新的存储空间，完完全全的拷贝一整个一模一样的对象（数组）
JavaScript之实现深拷贝的方法
low666的博客
03-14 155
JavaScript之实现深拷贝的方法 1.用递归的方式实现深拷贝 //使用递归的方式实现数组、对象的深拷贝 function deepClone(obj) { //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝 var objClone = Array.isArray(obj) ? [] : {}; //进行深拷贝的不能为...
js实现深拷贝的方法
阳光下的冷静的博客
06-12 1292
js实现深拷贝的方法 使用递归的方式实现深拷贝 function deepClone(origin，target){ var target = target || { }; var toStr = Object.prototype.toString; var arrStr = "[object Array]"; for(var prop on origin){ if(or...
JS深拷贝的五种方法
热门推荐
谢谢你的关注
08-09 1万+
JavaScript深拷贝五种方法（JSON方法，for…in，递归，Array.prototype.forEach，jQuery的extend）
JS浅拷贝和深拷贝原理与实现方法分析
12-11
在实际开发中，选择哪种深拷贝方法通常取决于项目需求和性能考虑。`JSON.stringify` 和 `JSON.parse` 方案简单易用，但不支持非JSON格式的数据；而自定义函数和第三方库如lodash提供了更全面的解决方案，但可能在...
JavaScript实现浅拷贝与深拷贝的方法分析
12-01
JavaScript中实现深拷贝有多种方法，下面列举了其中几种常见的： 1. **for循环实现**： 使用for循环遍历数组的每个元素，逐个添加到新数组中，这样可以创建一个独立的新数组，不受原数组影响。 2. **slice方法**...
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 242
原生WebSocket： new WebSocket。
Webkit简介以及工作流程
读心悦
07-10 319
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
最新发布
cc1314_工作、学习有感
07-12 248
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 311
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 193
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
js 实现深拷贝的方法有哪些
05-31
使用 Lodash 库中的 `cloneDeep()` 方法可以实现深拷贝。 ```javascript const _ = require('lodash'); function deepCopy(obj) { return _.cloneDeep(obj); } ``` 需要注意的是，以上方法都无法处理循环引用的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值