手写JavaScript深拷贝函数

最新推荐文章于 2024-10-01 20:12:28 发布

KwyxLibrary

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量39

点赞数

本文链接：https://blog.csdn.net/KwyxLibrary/article/details/133566510

版权

前端专栏收录该内容

177 篇文章 6 订阅 ¥59.90 ¥99.00

订阅专栏

本文介绍了JavaScript中深拷贝的概念，由于JavaScript的对象是通过引用传递，因此默认赋值操作只复制引用。为避免修改一个对象影响另一个，文章提供了一个手写的深拷贝函数实现，该函数能处理包括对象、数组、嵌套结构在内的复杂数据，确保拷贝后的对象与原对象独立。

摘要由CSDN通过智能技术生成

深拷贝是指在将一个对象复制到另一个对象时，创建一个完全独立的副本，而不是仅仅复制引用。在JavaScript中，对象是通过引用传递的，所以默认情况下，赋值操作只是复制了引用，而不是复制对象本身。这就导致了在修改其中一个对象时，另一个对象也会受到影响。为了解决这个问题，我们可以手动实现一个深拷贝函数。

下面是一个手写的JavaScript深拷贝函数的实现：

function deepClone(obj) {
   
  // 检查传入的参数是否为对象
  if (typeof obj !==

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

KwyxLibrary

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

JavaScript手写系列之手写深拷贝

Yolanda_NuoNuo的专栏

07-07

1309

传说中前端面试必考的手写系列之，实现深拷贝～ 1、思路就是递归实现啦～然后要注意先判断是不是数组，因为数组和对象都是引用类型，如果用instanceof判断呢，因为都在同一条原型链上， 2、编码实现 const obj1 = { name: 'Yolanda', age: 18, info: { array: [1, 3, [4, 8, 0], [2, 4, 7]], friends: { male: { name: '

手写实现深拷贝函数

zep

03-16

2933

对象相互赋值的一些关系，分别包括：引入的赋值：指向同一个对象，相互之间会影响；对象的浅拷贝：只是浅层的拷贝，内部引入对象时，依然会相互影响；对象的深拷贝：两个对象不再有任何关系，不会相互影响；可以通过JSON.parse来实现深拷贝，但存在以下弊端：这种深拷贝的方式其实对于函数、Symbol等是无法处理的；并且如果存在对象的循环引用，也会报错的；一、简单的深拷贝函数实现自定义深拷贝的基本功能：二、对其他数据类型的值进行处理包括：数组、函数、Symbol、Set、Map.

参与评论您还未登录，请先登录后发表或查看评论

JavaScript中手写深拷贝函数-事件总线

m0_71485750的博客

07-09

740

JavaScript并没有给我们提供深拷贝的方法, 因为深拷贝是非常消耗内存的前面我们已经可以通过JSON的方法来实现深拷贝了：JSON.parse那么, 如果实际开发中真的需要深拷贝, 当然这种情况是非常少的, 但是如果真的需要, 我们就需要自定义深拷贝函数了手写深拷贝我们按照以下步骤:1.需要接收的参数接收一个对象作为参数, 对这个传入的对象进行深拷贝 2.返回值是什么返回一个已经完成深拷贝的新对象 3.内部实现我们思考一下, 如何判断是否是一个对象呢, 大家应该都想到了typeof, 但是我们

手写一个深拷贝函数

宋坚强大大~~

03-05

993

Object.assign和展开运算符都是浅拷贝如何实现一个深拷贝 function deepClone(obj) { if (obj == null) return obj; // 如果是null 或者undefined 直接返回 // 正则表达式或者日期对象直接返回 if (obj instanceof Date) return new Date(obj); if (obj instanceof RegExp) return new RegExp(obj); // 不..

手写实现深拷贝

herman_student的博客

02-25

1318

原理：toString() 是 Object 的原型方法，调用该方法，可以统一返回格式为 “[object Xxx]” 的字符串，其中 Xxx 就是对象的类型。对于 Object 对象，直接调用 toString() 就能返回 [object Object]；而对于其他对象，则需要通过 call 来调用，才能返回正确的类型信息。原理：因为内部机制是通过判断对象的原型链中是不是能找到类型的。

javascript进阶：手写一个深拷贝函数

08-09

236

纯javascript实现深拷贝函数,可能不能100%适配所有场景，有相关逻辑错误欢迎指出。

手写深拷贝和浅拷贝

qq_45438471的博客

04-24

548

本文主要说明如何实现深拷贝和浅拷贝。

JS手写递归深拷贝

qq_35191845的博客

04-30

1399

js中拷贝分为两种，浅拷贝和深拷贝，这篇文章中只提深拷贝。 深拷贝：将复杂数据类型进行层层拷贝，达到两个对象（数组）的值相同但在内存中指向地址不同（改变其中一个对象（数组）的值，另一个不会发生改变）。我们常用的方法 JSON.pares(JSON.stringfly())这是es6新增的方法，但是他有一定的缺陷，就是当我们要拷贝的对象（数组）里有包含undefind的话那么就会拷贝不到。今天我展示的是利用递归函数手写深拷贝，接下来上才艺。 //定义深拷贝函数 function deepClon

手写JS—深拷贝

Florenza的博客

12-08

2377

一个引用对象一般来说由两个部分组成：一个具名的Handle，也就是我们所说的声明（如变量）和一个内部（不具名）的对象，也就是具名Handle的内部对象。它在Manged Heap（托管堆）中分配，一般由新增引用对象的New方法是进行创建。深拷贝是指源对象与拷贝对象互相独立，其中任何一个对象的改动都不会对另外一个对象造成影响。比较典型的就是Value（值）对象，如预定义类型Int32，Double，以及结构（struct），枚举（Enum）等。一般简单来说我们都会这么写但是会有循环引用的问题。

深拷贝.js(考虑最全的深拷贝函数)

06-27

js考虑最完善的深拷贝函数,可以深拷贝引用对象和基本对象

一些手写JavaScript常用的函数汇总

10-17

深拷贝是一个常见的需求，尤其是当我们需要复制一个对象或数组，但不希望新对象与原对象共享引用时。下面是一个简单的深拷贝实现： ```javascript function cloneDeep(target) { function checkType(target) { ...

javascript深拷贝、浅拷贝和循环引用深入理解

10-18

3. Lodash库的_.cloneDeep()函数：Lodash提供了一个强大且完善的深拷贝函数，能够处理各种复杂情况，包括循环引用。循环引用是指一个对象引用了另一个对象，而那个对象又反过来引用了第一个对象。在处理深拷贝时，...

如何搭建Vue脚手架

w6437286的博客

09-26

494

本文主要讲解如何搭建vue脚手架。

JavaScript ArrayBuffer的读写与类型转换

白瑕的博客

10-01

262

所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.

沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞

最新发布

2301_77012231的博客

10-01

278

沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。

Vue实战教程：如何用JS封装一个可复用的Loading组件

Jiaberrr的博客

09-28

478

通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。

深入理解 Nuxt.js 中的 app:data:refresh 钩子

09-29

1292

钩子在数据被刷新时触发，可以选择性地传入要刷新的键名（keys）。这为开发者提供了一个灵活的机制来响应数据变化，并进行必要的更新。Nuxt.js 中的钩子的用途及其实现方法。这个钩子为开发者提供了一种灵活的方式来处理数据的更新，从而优化应用的响应性和用户体验。

前端规范工程-2：JS代码规范（Prettier + ESLint）

Vinca@的博客

09-26

791

Prettier 主要关注代码的格式，而 ESLint 则关注代码的质量和规范。结合使用这两个工具，可以极大地提高代码的可读性和维护性，同时减少潜在的错误和不一致性。

跨境电商系统基本功能和特点

商城 / Java 商城 -首选商城开源电商商城源码商城

09-29

379

综上所述，跨境电商系统通过其全面的功能和特点，为全球用户提供了便捷、高效、安全的跨境购物体验。随着技术的不断进步和市场的不断发展，跨境电商系统将继续优化和完善，以适应新的挑战和机遇。

js手写一个深拷贝函数

09-13

以下是一个用 JavaScript 手写的深拷贝函数： ```javascript function deepClone(obj) { // 检查是否为数组或对象 if (typeof obj !== 'object' || obj === null) { return obj; } let clone = Array....