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

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



相关文章
|
12天前
|
存储 JavaScript 前端开发
|
13天前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
17 1
|
14天前
|
存储 JavaScript 前端开发
JavaScript 对象
JavaScript 对象
12 1
|
17天前
|
JavaScript Java 数据安全/隐私保护
js对象可扩展性和属性的四个特性(下)
js对象可扩展性和属性的四个特性(下)
|
18天前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
20 1
|
19天前
|
JavaScript 前端开发
技术经验分享:javaScript遍历对象、数组总结
技术经验分享:javaScript遍历对象、数组总结
12 0
技术经验分享:javaScript遍历对象、数组总结
|
11天前
|
JavaScript
js 简易对象转字符串后恢复为简易对象(如 ^a=$1^b=2转对象)
js 简易对象转字符串后恢复为简易对象(如 ^a=$1^b=2转对象)
8 0
|
11天前
|
JavaScript
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
9 0
|
11天前
|
JavaScript
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
13 0