使用递归实现深拷贝

发布时间：2023年12月31日

文章目录

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

我们知道在 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 赋值给 newObj
	for (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) {
    // 判断是否是一个 Symbol
	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]
	}

	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 类型的key
	const 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)
	}

	// 处理 map
	if (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 作为 value
	wm.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 => {
			// 传递 weakmap
			list.push(deepClone(item, wm))
		})
		return new Set(list)
	}

	if (value instanceof Map) {
		const myMap = new Map()
		for (const [key, _val] of value) {
			// 传递 weakmap
			const newValue = deepClone(_val, wm)
			myMap.set(key, newValue)
		}
		return myMap
	}

	if (value instanceof Map) {
		const list = []
		value.forEach(item => {
			// 传递 weakmap
			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) {
		// 同时在内部调用的时候，为了防止后续调用在创建 weakmap，我们在这里调用的时候就要把第一次执行 deepClone 创建的 weakmap 传递进去
		newObj[key] = isObject(value) ? deepClone(value[key], wm) : value[key]
	}

	const symKeys = Object.getOwnPropertySymbols(value)
	for (const sk of symKeys) {
		// 传递 weakmap
		newObj[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
}
文章来源:https://blog.csdn.net/qq_53109172/article/details/135319542
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章