js实现浅拷贝与深拷贝

js实现浅拷贝与深拷贝

浅拷贝

//在这里插入代码片
//1.封装一个函数
	function clone(o){
		let result = Reflect.ownKeys(o) 
		//获取到对象上普通值和symbol
		//的值 result得到的是一个数组,每个数组元素都是对象的属性名
		let newO = {}
		result.forEach(value => {
			if(o.hasOwnProperty(value)){
				newO[value] = o[value]
			}
		})
		return newO
	}
//测试一下
	var s1 = Symbol('foo')
		let obj2 = {
				name:'张角',
				profession:'chief',
				data:{
					brother:{
						name:'张宝'
					}
				},
				[s1]:555
			}

			let result = clone(obj2)
			result.data.brother = '天公将军' 
			//在这里修改对象内的对象的值
			console.log(result)
			console.log(obj2)

可以看到原来的对象 obj2 里的brother值被修改成为 天公将军
浅拷贝完成

第二个办法
使用Object.assign()对象方法来复制

//Object.assign() 的使用方法是将所有可枚举的属性复制到目标对象
var target = {a:1}
var sc1 = {b:2}
var sc3 = {c:4}

console.log(Object.assign(target,sc1,sc2))

target返回的结果

说明:Object.assign()方法是浅拷贝，这里就不举例子说明了

深拷贝

 //直接封装一个函数   使用递归调用函数来处理对象的每一个属性
 
 //如果他的属性还是一个对象，那么就接着递归调用他  知道为空
 function deepClone(obj){
	let newObj = Array.isArray(obj) === true ? [] : {}  
	//根据数组和对象给分开处理
	// let newObj = new obj.constructor
	if(typeof obj !== 'object'){
		return obj
		//如果已经是一个普通值，就直接返回
	}
	if(obj === null){
		return null
		// null的typeof也是 undefined ,所以在这里要单独处理
	}
	if(obj instanceof RegExp){
		return new RegExp(obj)
		// 如果是一个正则，那么就要返回一个新的正则表达式 不然还是引用的
		//同一个堆内存的值
	}
	if(obj instanceof Date){
		return new Date(obj)
		//日期类型的 和上边的正则同理
	}
			// for(let key in obj){
			// 	if(obj.hasOwnProperty(key)){
			// 		newObj[key] = deepClone(obj[key])
			// 	}
			// }
	let result = Reflect.ownKeys(obj)
	result.forEach(key => {
			if(obj.hasOwnProperty(key)){
			newObj[key] = deepClone(obj[key])
		}
	})
	return newObj
}

测试一下结果

let result = deepClone(obj2)
	console.log('result',result)
	result.data.brother.name = '天公将军'
	console.log('修改值之后的result',result)
	console.log('obj2',obj2)

已经发现obj2(原对象)的内层对象没有发生改变，深拷贝已完成

新手一个，如有错误，欢迎指正