使用递归实现深拷贝

文章目录

    • 为什么要使用递归什么深拷贝
    • 具体实现
      • 基础实现
      • 处理 函数
      • 处理 Symbol
      • 处理 Set
      • 处理 Map
      • 处理 循环引用
    • 结语-源码

为什么要使用递归什么深拷贝

我们知道在 JavaScript 中可以通过使用JSON序列化来完成深拷贝,但是这种方法存在一些缺陷,比如对于函数、Symbol、Map 等等数据是无法处理的,甚至如果是循环引用的话还会造成报错,具体关键JSON的介绍我就不在这里赘述了,有兴趣的可以看看我的另一篇文章JSON详解

在这里插入图片描述

在这里插入图片描述

具体实现

基础实现

  1. 我们先实现一下最简单的,只对普通数据进行处理,数据如下:

    const obj = {name: '张三',age: 18,friends: [{ name: '李四', age: 20 },{ name: '王五', age: 22 }],other:{address:'长沙'}
    }
    
  2. 我们肯定要有一个这样的方法或者函数来帮助我们完成这个深拷贝,如果要两个对象要不关联的话,那就只能是创建一个全新的对象,全新的对象怎么来,对吧,所以我们就可以写出如下代码:

    function deepClone(value) {// 创建对象-用来承载数据const newObj = {}
    }
    
  3. 现在的问题就回到了。我们如何把 obj 的数据赋值给 newObj,肯定不能是直接 newObj = obj,我们要做的就是拿到 obj 对象中的 k、v,通过这个 k、v 重新给 newObj 这个对象创建数据,但是我又不知道这个传入进来的对象具备什么属性和值,所以怎么得到这个 k、v 呢?而这种取出一个数据中的每一项,是不是感觉和数组的遍历很像呢,所以如果可以遍历这个对象的话,是不是就可以拿到呢

  4. 不知道大家有没有记得以前 js 基础接触过的 for…in 方法,这个方法就可以遍历对象,可以遍历对象是不是就表示可以把 obj 所有有的属性和值也给 newObj 对象赋值一下呢?所以我们下一步就应该是使用 for…in 来完成,如下:

    function deepClone(value) {const newObj = {}// 遍历 value 赋值给 newObjfor (let key in value) {newObj[key] = value[key]}return newObj
    }
    
  5. 现在是不是实现了我们的效果呢,不知道,打印结果看一下吧,添加测试代码,如下:

    const newObj = deepClone(obj)console.log('newObj: ', newObj)
    
  6. 结果如图:

    在这里插入图片描述

  7. 值确实是一样的,但是是不是可以实现那种修改 newObj 而不影响 obj 呢?测试一下吧,测试代码如下:

    console.log(newObj === obj)console.log(newObj.friends === obj.friends)console.log(newObj.other === obj.other)newObj.other.address = '上海'console.log(newObj.other.address)console.log(obj.other.address)
    
  8. 输出结果如图:

    在这里插入图片描述

  9. 这就非常的有意思了,newObj 确实不等于 obj 了,表示最外层的引用确实断开了,但是 friends 和 other 属性确还是相等的,且改变了 newObj.other.address 的值,obj 这个地方的值也改变了

  10. 其实细心一点就不难发现,firends 和 other 属性也都是一个对象啊,所以我们是不是也要对他们进行处理呢?那怎么处理呢,针对这种情况和我们处理这个外层的其实是不是一致的啊,而重复这个过程,哪想到了什么,对,本文的主题,递归,所以如果检测到一个值是 对象 的话,就再次递归这个函数执行,修改代码如下:

    function deepClone(value) {const newObj = {}for (let key in value) {// 判断属性值是否为对象,如果是对象则递归调用deepClone函数newObj[key] = typeof value[key] === 'object' ? deepClone(value[key]) : value[key]}return newObj
    }
    
  11. 查看克隆的结果,如图:
    在这里插入图片描述

  12. 从结果上看 friends 这个属性值从数组变成了对象,这是因为数组也是一个对象,而我们处理数组的方式也是重新创建一个 newObj 来存储数组的数据,所以返回的值自然就变成了对象,这时候应该怎么解决呢?

  13. 问题尽然是最开始的 newObj 被赋值为了一个 {},那么我们只要判断当前克隆的值是一个数组的时候,就赋值为 [],否则赋值为 {},是不是就可以解决了,如下:

    function deepClone(value) {// 如果是数组,则创建一个新的数组,否则创建一个新的对象const newObj = Array.isArray(value) ? [] : {}for (let key in value) {newObj[key] = typeof value[key] === 'object' ? deepClone(value[key]) : value[key]}return newObj
    }
    
  14. 结果如图:

    在这里插入图片描述

  15. 现在我们不改动测试语句,查看测试结果,如图:

    在这里插入图片描述

  16. 是不是感觉比较简单呢,剩下的我们需要做一下优化,判断是否是一个对象可以抽离成一个方法,且可以用于开始的边界判断,如下:

    function isObject(value) {return typeof value === 'object' && value !== null
    }
    
  17. 然后使用这个方法优化 deepClone 方法,如下:

    function deepClone(value) {if (!isObject(value)) {return value}const newObj = Array.isArray(value) ? [] : {}for (let key in value) {newObj[key] = isObject(value) ? deepClone(value[key]) : value[key]}return newObj
    }
    

处理 函数

  1. 为了更加直观的看到处理函数类型,我们先暂时对克隆的对象做一些修改,如下:

    const obj = {name: '张三',age: 18,sayHi: function () {console.log('你好啊!')}
    }
    
  2. 首先对于这个函数的处理,我们需要先认清楚一些概念,如果一个函数内部的逻辑非常复杂,我们要通过创建一个新的 Funciton 来实现一个完全的新的函数,也是可以的,但是会非常的复杂,而且没有什么必要,一个函数本身就具备复用性,内部的作用域本身就互不干扰,所以我们只要获取到这个函数,并重新赋值给新拷贝的对象里面的对应的位置即可,这也是一种目前比较常见的做法

  3. 因此我们只要发现当前克隆的值是一个函数的话,直接返回即可,如下:

    function deepClone(value) {// 判断是否是一个函数if (typeof value === 'function') {return value}if (!isObject(value)) {return value}const newObj = Array.isArray(value) ? [] : {}for (let key in value) {newObj[key] = isObject(value) ? deepClone(value[key]) : value[key]}return newObj
    }
    
  4. 现在输出打印克隆的打印结果,如图:

    在这里插入图片描述

处理 Symbol

  1. 我们还是一样先修改一下数据,如下:

    const s1 = Symbol('aaa')
    const s2 = Symbol('bbb')const obj = {name: '张三',age: 18,[s1]: 'aaa',s2: s2
    }
    
  2. 我们使用目前的方法,来看一下克隆的结果,如图:

    在这里插入图片描述

  3. 使用 s1 作为键的属性,没有被拷贝进来,但是使用字符串 s2 的属性和携带的 Symbol 类型的值被拷贝了进来,而且这两个对象里面的 s2 这个 Symbol值是不是同一个呢?测试代码如下:

    console.log(newObj.s2 === obj.s2) // true
    
  4. 就不粘贴结果了,测试中得出的还是同一个 Symbol,所以如果不希望使用同一个 Symbol 的话,我们可以在最开始的时候进行一个判定,如果当前克隆的值是一个 Symbol 的话,就重新创建 Symbol,并使用原来的 Symbol 的 description,如下:

    在这里插入图片描述

    function deepClone(value) {// 判断是否是一个 Symbolif (typeof value === 'symbol') {return Symbol(value.description)}if (typeof value === 'function') {return value}if (!isObject(value)) {return value}const newObj = Array.isArray(value) ? [] : {}for (let key in value) {newObj[key] = isObject(value) ? deepClone(value[key]) : value[key]}return newObj
    }
    
  5. 查看输出结果,如下:

    console.log(newObj.s2 === obj.s2) // false
    
  6. 那为什么 Symbol 作为 key 的时候无法被拷贝呢?这是因为一个 Symbol 是无法被遍历的,如图:

    在这里插入图片描述

  7. 那如果获取这个 Symbol 呢?如图:

    在这里插入图片描述

  8. 具体是不是可以呢,我们写一些代码测试一下,如图:

    在这里插入图片描述

  9. 所以我们现在需要针对 Symbol 为key时进行一些特殊的处理,如下:

    function deepClone(value) {if (typeof value === 'symbol') {return Symbol(value.description)}if (typeof value === 'function') {return value}if (!isObject(value)) {return value}const newObj = Array.isArray(value) ? [] : {}for (let key in value) {newObj[key] = isObject(value) ? deepClone(value[key]) : value[key]}// 获取对象上所有的为 Symbol 类型的keyconst symKeys = Object.getOwnPropertySymbols(value)for (const sk of symKeys) {// 赋值调用当前函数即可//  - 至于这个 key 是不是要重新 Symbol 就看自己的需求了newObj[sk] = deepClone(newObj[sk])}return newObj
    }
    
  10. 查看结果,如图:

    在这里插入图片描述

处理 Set

  1. 修改数据如下:

    const obj = {name: '张三',age: 18,set: new Set([1, 2, 3])
    }
    
  2. 拷贝的结果如图:

    在这里插入图片描述

  3. set 变了一个空对象,这肯定不是我们需要的结果,那就还需要对是一个 set 类型的时候进行处理,这个也很简单

    function deepClone(value) {if (value instanceof Set) {return new Set([...value])}if (typeof value === 'symbol') {return Symbol(value.description)}if (typeof value === 'function') {return value}if (!isObject(value)) {return value}const newObj = Array.isArray(value) ? [] : {}for (let key in value) {newObj[key] = isObject(value) ? deepClone(value[key]) : value[key]}const symKeys = Object.getOwnPropertySymbols(value)for (const sk of symKeys) {newObj[sk] = deepClone(newObj[sk])}return newObj
    }
    
  4. 结果如图:

    在这里插入图片描述

  5. 但是这种赋值的方法是存在一些隐患的,比如我们存入的是 set 是对象呢?首先改变数据,我们看一下代码,如下:

    const obj = {name: '张三',age: 18,set: new Set([1, 2, 3]),sets: new Set()
    }const o1 = { a: 1, b: 2 }
    const o2 = { c: 3, d: 4 }
    obj.sets.add(o1)
    obj.sets.add(o2)
    
  6. 我们按照现在的方法看一下克隆的结果,测试代码如下:

    const newObj = deepClone(obj)console.log(newObj)const arr1 = []for (const [key, value] of newObj.sets.entries()) {arr1.push(value)
    }console.log(arr1[0] === o1)arr1[0].a = 100
    console.log(o1)
    
  7. 结果如图:

    在这里插入图片描述

  8. 可以看到 o1 这个对象是受到了影响的,所以我们需要单独对这个赋值的过程进行一些处理,如下:

    function deepClone(value) {if (value instanceof Set) {// 创建一个数组来存储值const list = []// 通过 forEach 方法将 Set 中的值复制到数组中value.forEach(item => {// 而这个值通过递归在处理一次list.push(deepClone(item))})// 创建一个新的 Set 对象,并将数组中的值作为参数传入return new Set(list)}if (typeof value === 'symbol') {return Symbol(value.description)}if (typeof value === 'function') {return value}if (!isObject(value)) {return value}const newObj = Array.isArray(value) ? [] : {}for (let key in value) {newObj[key] = isObject(value) ? deepClone(value[key]) : value[key]}const symKeys = Object.getOwnPropertySymbols(value)for (const sk of symKeys) {newObj[sk] = deepClone(newObj[sk])}return newObj
    }
    
  9. 现在我们再看一下处理的结果,如图:

    在这里插入图片描述

处理 Map

  1. 修改的数据如下:

    const obj = {name: '张三',age: 18,map: new Map()
    }const o1 = { a: 1, b: 2 }
    const o2 = { c: 3, d: 4 }
    const o3 = { name: 'ls', age: 22 }obj.map.set('o1', o1)
    obj.map.set(o2, o3)
    
  2. 如果不处理 map,看看打印的结果,如图:

    在这里插入图片描述

  3. 这个结果一样也不是我们所期望的,但是 set 和 map 处理的方式其实都是差不多的,所以我就直接展示代码了,如下:

    function deepClone(value) {if (value instanceof Set) {const list = []value.forEach(item => {list.push(deepClone(item))})return new Set(list)}// 处理 mapif (value instanceof Map) {const myMap = new Map()for (const [key, _val] of value) {// 这里的 key 是不是需要进行再次的递归处理就取决于自己的需求了//  - 一般是不需要再次做额外的处理的const newValue = deepClone(_val)myMap.set(key, newValue)}return myMap}if (value instanceof Map) {const list = []value.forEach(item => {list.push(deepClone(item))})return new Map(list)}if (typeof value === 'symbol') {return Symbol(value.description)}if (typeof value === 'function') {return value}if (!isObject(value)) {return value}const newObj = Array.isArray(value) ? [] : {}for (let key in value) {newObj[key] = isObject(value) ? deepClone(value[key]) : value[key]}const symKeys = Object.getOwnPropertySymbols(value)for (const sk of symKeys) {newObj[sk] = deepClone(newObj[sk])}return newObj
    }
    
  4. 结果如图:

    在这里插入图片描述

  5. 测试结果,如下:

    console.log(newObj.map.get('o1') === obj.map.get('o1')) // false
    

处理 循环引用

  1. 修改数据如下:

    const obj = {name: '张三',age: 18
    }// my 属性引用自身
    obj.my = obj
    
  2. 查看输出的结果,如下:

    在这里插入图片描述

  3. 直接就报了栈溢出的错误,这就是每次递归拷贝的都是 obj 本身,而每个 obj 都具备 my 属性指向自身,递归没有终止条件,自然就会报错

  4. 这个 my 是通过 obj.my = obj 实现的,那么是不是表示我们在创建了一个 newObj 的时候,也只是需要把 newObj 这个对象自身赋值给 newObj.my = newObj 就可以了,而不需要一直的拷贝

  5. 为了实现这个,我们就需要来分析一下了,怎么完成 newObj.my = newObj 这一步操作,要完成这个操作首先我们就要能够获取到 newObj 这个对象,这是第一点;第二个条件就是我们还需要能够保存最开始克隆的原始对象 obj,而能够实现这一点的要求的,我们就可以联想到 map 或者 weakmap,这里保证 obj 存储的时候就是弱引用,而不会外界需要销毁的时候导致无法销毁,使用 weakpack 会更加的合适

  6. 所以我们应该有这么一个操作,手动创建一个 weakmap,然后再 deepClone 第一次创建了 newObj 的时候,就进行存储,wm.set(obj, newObj),而当存在一个这样的数据的时候,我们在就可以在 deepClone 方法上加上一个条件,if(当vm中存在obj这个k的时) { return 就返回存储的 newObj 这个值 }

  7. 梳理了过程,就可以回到具体的代码实现,如下:

    // 全局创建 WeakMap
    const wm = new WeakMap()function deepClone(value) {if (value instanceof Set) {const list = []value.forEach(item => {list.push(deepClone(item))})return new Set(list)}if (value instanceof Map) {const myMap = new Map()for (const [key, _val] of value) {const newValue = deepClone(_val)myMap.set(key, newValue)}return myMap}if (value instanceof Map) {const list = []value.forEach(item => {list.push(deepClone(item))})return new Map(list)}if (typeof value === 'symbol') {return Symbol(value.description)}if (typeof value === 'function') {return value}if (!isObject(value)) {return value}// 当拷贝到 obj.my 这个属性的时候,由于 obj.my 的值就是 obj 本身//  - 所以此时传入的值就是 obj,而其他属性如果没有引用自身的话,就不会存在//  - 就可以通过判断 weakmap 中是否存在这个数据,如果存在就直接返回 weakmap 中一开始存储的值if (wm.has(value)) {return wm.get(value)}const newObj = Array.isArray(value) ? [] : {}// 创建 newObj 的时候,以需要克隆的初始值作为 key,newObj 作为 valuewm.set(value, newObj)for (let key in value) {newObj[key] = isObject(value) ? deepClone(value[key]) : value[key]}const symKeys = Object.getOwnPropertySymbols(value)for (const sk of symKeys) {newObj[sk] = deepClone(newObj[sk])}return newObj
    }
    
  8. 结果如图:

    在这里插入图片描述

  9. 基于此我们就可以实现 newObj.my.my.my… 的操作,如图:

    在这里插入图片描述

  10. 而进行到这一步,还有一个需要的地方,由于我们这个 weakmap 是全局的,就会导致如果在实际的使用中多次调用 deepClone 这个方法的时候,weakmap 这个里面的数据就会越来越多,而实际当完成拷贝的时候,这个数据就不用存在了

  11. 因此我们可以改写一下,如下:

    // 通过参数实现创建 weakmap,只要没有传递,就会自动创建,而如果没有传递了则不会创建,就会使用传递的 weakmap
    function deepClone(value, wm = new WeakMap()) {if (value instanceof Set) {const list = []value.forEach(item => {// 传递 weakmaplist.push(deepClone(item, wm))})return new Set(list)}if (value instanceof Map) {const myMap = new Map()for (const [key, _val] of value) {// 传递 weakmapconst newValue = deepClone(_val, wm)myMap.set(key, newValue)}return myMap}if (value instanceof Map) {const list = []value.forEach(item => {// 传递 weakmaplist.push(deepClone(item, wm))})return new Map(list)}if (typeof value === 'symbol') {return Symbol(value.description)}if (typeof value === 'function') {return value}if (!isObject(value)) {return value}if (wm.has(value)) {return wm.get(value)}const newObj = Array.isArray(value) ? [] : {}wm.set(value, newObj)for (let key in value) {// 同时在内部调用的时候,为了防止后续调用在创建 weakmap,我们在这里调用的时候就要把第一次执行 deepClone 创建的 weakmap 传递进去newObj[key] = isObject(value) ? deepClone(value[key], wm) : value[key]}const symKeys = Object.getOwnPropertySymbols(value)for (const sk of symKeys) {// 传递 weakmapnewObj[sk] = deepClone(newObj[sk], wm)}return newObj
    }
    
  12. 结果如图:

    在这里插入图片描述

  13. 在效果上也是没有问题的

结语-源码

我在测试中都是单独每一项数据进行测试的,是为了更好的观测,实际一个对象都包含这些数据的话也都是 ok的,需要的话可以自己测试,而且写下来就会发现,其实逻辑都是差不多的,可以根据你实际的情况进行增加或者减免,在日常的开发中使用 JSON 序列化一般也可满足我们的需求,不过知道不用和不知道还是存在本质的区别的,可能现在有些你学习的技术没有实际的意义,但是只有积累的足够多的时候你才能完成一些本质上的突破

很多事情不是因为看到了希望才去坚持,而是因为坚持了才能看到希望

function deepClone(value, wm = new WeakMap()) {if (value instanceof Set) {const list = []value.forEach(item => {list.push(deepClone(item, wm))})return new Set(list)}if (value instanceof Map) {const myMap = new Map()for (const [key, _val] of value) {const newValue = deepClone(_val, wm)myMap.set(key, newValue)}return myMap}if (value instanceof Map) {const list = []value.forEach(item => {list.push(deepClone(item, wm))})return new Map(list)}if (typeof value === 'symbol') {return Symbol(value.description)}if (typeof value === 'function') {return value}if (!isObject(value)) {return value}if (wm.has(value)) {return wm.get(value)}const newObj = Array.isArray(value) ? [] : {}wm.set(value, newObj)for (let key in value) {newObj[key] = isObject(value) ? deepClone(value[key], wm) : value[key]}const symKeys = Object.getOwnPropertySymbols(value)for (const sk of symKeys) {newObj[sk] = deepClone(newObj[sk], wm)}return newObj
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/313807.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

xxHash - 编译, 库用法

文章目录 xxHash - 编译, 库用法概述笔记xxHash的代码库地址编译xxHash的用法自己搭建一个测试工程测试工程文件目录程序参数怎么给?-H3-H3 --binary自己写一个命令行工程, 对一个buffer来做hash测试工程(vs2019 vc console)END xxHash - 编译, 库用法 概述 给AES设置 key, …

12.29最小生成数K算法复习(注意输入输出格式),校园最短路径(通过PRE实现路径输出,以及输入输出格式注意)

7-2 最小生成树-kruskal算法 分数 15 const int maxn 1000; struct edge {int u, v, w; }e[maxn]; int n, m, f[30]; bool cmp(edge a, edge b) {return a.w < b.w; } int find(int x) {if (f[x] x) {return x;}else {f[x] find(f[x]);return f[x];} } //int arr[100…

10. UVM Environment

环境为agents, scoreboards和其他验证组件&#xff08;包括有助于在 SoC 级别重用块级环境组件的其他环境类&#xff09;提供良好的层次结构和容器。用户定义的 env 类必须从 uvm_env 类扩展。 10.1 uvm_env class hierarchy 类声明&#xff1a; virtual class uvm_env extend…

Android长按图标展示快捷方式

if (Build.VERSION.SDK_INT > Build.VERSION_CODES.O) {new Thread(() -> {// 获取ShortcutManager实例ShortcutManager shortcutManager getSystemService(ShortcutManager.class);// 创建要添加的快捷方式ShortcutInfo.Builder shortcutBuilder new ShortcutInfo.Bui…

数据结构模拟实现LinkedList双向不循环链表

目录 一、双向不循环链表的概念 二、链表的接口 三、链表的方法实现 &#xff08;1&#xff09;display方法 &#xff08;2&#xff09;size方法 &#xff08;3&#xff09;contains方法 &#xff08;4&#xff09;addFirst方法 &#xff08;5&#xff09;addLast方法 …

【Java基础篇】While(true) 和 for(;;)哪个性能更好呢

两个无限循环的性能分析 ✔️两者反编译比较 ✔️两者反编译比较 While(true) 和 for(; &#x1f609; 都是做无限循环的代码&#xff0c;他们两个有什么区别呢&#xff1f; 关于这个问题&#xff0c;网上有很多的讨论&#xff0c;今天我收到私信&#xff0c;所以凑着假期&…

软件功耗管理

一、背景 功耗管理是由软件、处理器、外设、电源等一起构成的系统问题。 App中很小的低效行为在整个系统中累加后&#xff0c;会对电池寿命、性能、响应速度和温度产生明显的影响。作为app开发人员&#xff0c;我们有责任确保我们的app尽可能高效地运行。使用苹果推荐的API&a…

消息队列LiteQueue

文章目录 一、简介二、设计2.1 队列结构设计2.2 队列接口设计 三、实现3.1 队列锁的实现3.2 创建队列3.3 写入队列3.4 读出数据3.5 判断队列是否为空3.6 判断队列是否为满3.7 清空队列3.8 删除队列 四、测试参考 一、简介 收到消息时先把接收到的消息放到队列中。在任务中从队…

31K star!替换Postman ,开源优雅的API工具:Insomnia

API 调试工具大家第一个想到的肯定是Postman&#xff0c;但是这几年Postman在国内越来越难用&#xff0c;很多人也都在考虑找一个替代品。 今天我们来推荐一个可以替换掉Postman的 API 工具&#xff0c;他开源、支持本地使用&#xff0c;也更加轻量、更加优雅&#xff0c; 目前…

ROS TF坐标变换 - TF树

目录 一、TF树介绍二、TF2与TF三、构建TF树四、rviz查看TF坐标关系 一、TF树介绍 在机器人系统中&#xff0c;存在运动学模型和动力学模型。对于刚体机器人&#xff0c;动力学模型基于刚体动力学&#xff0c;代表机器人系统在运动过程中力/力矩与其运动状态的变化关系。而运动…

Python 基础语法01

变量声明 #运算 num 1 num 1 print("num 1",num)num - 1 print("num - 1", num)num * 4 print("num * 4",num)num 3 num % 2 print("num%2",num)num ** 2 print("num ** 2", num)num 9 num // 2 print("num // …

odoo17 | 创建一个新应用程序

前言 本章的目的是为创建一个全新的Odoo模块奠定基础。 我们将从头开始&#xff0c;以使我们的模块被Odoo识别所需的最低限度。 在接下来的章节中&#xff0c;我们将逐步添加功能以构建一个真实的业务案例。 教程 假设我门需要在odoo上开发一个新app模块例如房地产广告模块。…