JS实现深拷贝

这篇博客探讨了JavaScript中的深拷贝问题,通过`deepClone`函数实现了一个递归拷贝复杂对象的示例,其中包括嵌套的对象和数组。内容涉及到对象属性遍历、类型判断以及递归思想在拷贝过程中的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

	var obj = {
			name : "bac",
			age : 123,
			card : ['visa','master'],
			wife : {
					name : 'uio',
					son : {
						name : 'qqq'
					}
				}
			}

	var obj1 = {};

	function deepClone(origin,target){	
		var target = target || {},
			toStr = Object.prototype.toString,
			arrStr = "[object Array]";

		for(var prop in origin){
			if( origin.hasOwnProperty(prop)){
				
				if(origin[prop] !== "null"
				 &&  typeof(origin[prop]) == 'object'){

					if(toStr.call(origin[prop]) == arrStr){
								target[prop] = [];
							}else{
								target[prop] = {};
							}
								
				       deepClone(origin[prop],target[prop]);
					}else{
							target[prop] = origin[prop];
					}
			}

		}

		return target;
}
JavaScript实现深拷贝是一个常见的需求,因为浅拷贝只会复制对象的引用而不是实际的数据结构。以下是几种常用的深拷贝方法: ### 方法一:使用 `JSON.stringify` 和 `JSON.parse` 这是最简单的方式之一,适合于纯 JSON 数据结构的对象。 ```javascript function deepClone(obj) { return JSON.parse(JSON.stringify(obj)); } ``` 优点:简洁易懂 缺点:无法处理函数、`undefined`、`Date` 对象等特殊类型的值;也无法处理循环引用。 --- ### 方法二:递归遍历(手动实现) 这种方式可以解决复杂数据类型的问题,并能更全面地覆盖各种情况。 ```javascript function isObject(target) { const type = typeof target; return (type === 'object' || type === 'function') && !!target; // function也是object的一种 } function deepClone(target, map = new WeakMap()) { if (!isObject(target)) { return target; } if (map.get(target)) { // 解决循环引用问题 return map.get(target); } let cloneTarget; if (Array.isArray(target)) { cloneTarget = []; } else if (target instanceof Set) { cloneTarget = new Set(); } else if (target instanceof Map) { cloneTarget = new Map(); } else if (target.constructor) { cloneTarget = new target.constructor(); // 创建实例 } else { cloneTarget = {}; } map.set(target, cloneTarget); for (let key of Reflect.ownKeys(target)) { cloneTarget[key] = deepClone(target[key], map); } return cloneTarget; } ``` 这种方法的优点是可以很好地支持复杂的嵌套对象以及特殊数据类型如数组、Set、Map 等。 --- ### 方法三:利用第三方库(推荐生产环境使用) 像 Lodash 这样的工具库已经实现了高效的深拷贝功能: ```javascript const _ = require('lodash'); const objDeepCopy = _.cloneDeep(originalObj); ``` 这种方案省去了手写的麻烦,同时性能更高且兼容性更好。 --- **总结** 每种方式都有其优劣点,在选择具体实现的时候需要考虑目标对象的特点及项目的需求场景。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值