JS使用递归实现对象的深拷贝

简介: JS使用递归实现对象的深拷贝

刚开始对递归很不理解,但是在项目中其实要经常用到。

今天就想简单的把这个问题和老生常谈的对象深拷贝结合到一起讲讲。

我感觉看我的文章的用户大部分都是刚入门的新人,所以我这里衍伸再强调一下,什么叫函数,什么叫方法。

下面是一个函数,作用就是打印出来传入的那个值。没错,这就是一个简单的函数。

image.png

当这个函数,作为一个对象的属性值时候,那么这个函数read就被称为该对象身上的方法。(这里其实也能说是window对象身上的方法,因为定义在全局的函数默认是windows身上的一个属性,这里暂时不抬杠这种形式)

什么意思呢?如下:

image.png

此时,这个函数read,通过rookie.read的形式调用时,就被称为rookieread方法。

说白了,常用的console.log函数,就是window对象身上的方法。

一.浅拷贝


image.png

首先我们先简单设计一个对象的浅拷贝,浅拷贝可千万不要以为就是

我们暂时不考虑太难的逻辑,只做简单的场景。

1.首先,这个函数既然是克隆对象的作用,那么就得接受一个对象作为参数吧?然后,我们还得返回一个新的对象,就需要在函数体内设置一个新的对象,来准备作为返回值。(Record<string,any>是约束对象key,value类型的,暂时可以不去考虑,我们暂时只考虑这个参数obj肯定是一个合法的对象)

假设为下图的对象:

image.png

image.png

2.我们需要去遍历参数的key,然后把每个对应的value当成新的字符串去复制给obj2

image.png

我刚开始看到这个代码的时候,确实很难理解,但是我们这样写的话!是不是就明朗

image.png

再变变----->>

image.png

这样是不是就能看懂了?其实原理就是这样简单。最后returnobj2

image.png

二.递归


现在有一种场景,如果我objvalue也是一个对象呢?打个比方就是下面的这样:

image.png

那么代码执行到这里

image.png

就会是这样的效果:

object2.fridens=object.fridens
---->object2.fridens={name1:"小红",name2:"小黄"}

我们都知道引用类型这样的赋其实是赋,是不合理的,所以我们需要判断objvalue是不是一个对象(实际上还包括数组)类型,(数组array类型我们放到后面讨论)

那么我们再去调用这个函数自身不就可以了吗?

image.png

看着难懂?ok,那么这样写是不是就好理解了?(假设只有两层嵌套对象)

image.png

可以多阅读代码,理解几遍。



相关文章
|
15天前
|
JavaScript
JS 获取对象数据类型的键值对的键与值
JS 获取对象数据类型的键值对的键与值
|
24天前
|
JavaScript 前端开发
Math对象:JavaScript中的数学工具
Math对象:JavaScript中的数学工具
27 1
N..
|
1月前
|
存储 JavaScript 前端开发
JavaScript中的对象
JavaScript中的对象
N..
10 0
|
1月前
|
JavaScript 前端开发
JavaScript对象系列(菜菜出品,必看!!!)
JavaScript对象系列(菜菜出品,必看!!!)
|
18天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
1月前
|
存储 JavaScript 前端开发
在JavaScript中,对象和数组是如何进行扩展的?
在JavaScript中,对象和数组是如何进行扩展的?
22 4
|
2天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
16 3
|
4天前
|
JavaScript 前端开发 开发者
JavaScript中的错误处理:try-catch语句与错误对象
【4月更文挑战第22天】JavaScript中的错误处理通过try-catch语句和错误对象实现。try块包含可能抛出异常的代码,catch块捕获并处理错误,finally块则无论是否出错都会执行。错误对象提供关于错误的详细信息,如类型、消息和堆栈。常见的错误类型包括RangeError、ReferenceError等。最佳实践包括及时捕获错误、提供有用信息、不忽略错误、利用堆栈信息和避免在finally块中抛错。
|
9天前
|
JavaScript
【Js】检查Date对象是否为Invalid Date
【Js】检查Date对象是否为Invalid Date
14 0
|
10天前
|
存储 JavaScript 前端开发
JavaScript的引用数据类型主要包括对象
【4月更文挑战第16天】JavaScript的引用数据类型主要包括对象
16 4