使用递归实现深拷贝

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

我们知道在 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
}