【笔记】JS实现 深拷贝、浅拷贝

1、浅拷贝 Object.assign(target, source1, source2)

弊端：会指向到内存的同一个地址，修改的时候会影响到原数据

var initObj = {
	name: "xiaoye",
	age: 12,
	sex: undefined,
	addAge: function () {
		return ++this.age;
	}
}
var tempObj = {};
Object.assign(tempObj, initObj);
tempObj.age = 20;
console.log(initObj);//{name: "xiaoye", age: 12, sex: undefined, addAge: ƒ}
console.log(tempObj);//{name: "xiaoye", age: 20, sex: undefined, addAge: ƒ}

2、浅拷贝JSON.parse(JSON.stringify())

弊端:只能用在单纯只有数据的对象。正确处理的对象只有 Number, String, Boolean, Array, 扁平对象，即那些能够被 json 直接表示的数据结构。RegExp对象是无法通过这种方式深拷贝。也就是说，只有可以转成JSON格式的对象才可以这样用，像function,undefined,symbol 没办法正常实现拷贝。

var initObj = {
	name: "xiaoye",
	age: 12,
	sex: undefined,
	addAge: function () {
		return ++this.age;
	}
}
var tempObj = JSON.parse(JSON.stringify(initObj));
tempObj.age = 35;
console.log(initObj);//{name: "xiaoye", age: 12, sex: undefined, addAge: ƒ}
console.log(tempObj);//{name: "xiaoye", age: 35}

3.深拷贝，封装一个递归函数

//递归函数
function deepCopy(data) {
	if (typeof data !== 'object' || data == null) {
		return data;
	}
	//解释：不是对象(即是一个单独的数字、字符串、undefined、function)又或者是单独一个null，则直接返回该值
	var newData = data instanceof Array ? [] : {};
	for (var key in data) {
		newData[key] = typeof data[key] === 'object' ? (data[key] === null ? null : deepCopy(data[key])) : data[key];
		//解释：判断各个值，如果是 数字、字符串、undefined、function则直接赋值；如果是对象类型就再判断是否为null，为null则直接赋值，否则再次作为一个对象进行递归运算得到返回值后赋值
	}
	return newData;
}

//实例
var initObj = {
	name: "xiaoye",
	age: 30,
	sex: undefined,
	addAge: function () {
		return ++this.age;
	}
}
var tempObj = deepCopy(initObj);
tempObj.age = 35;
console.log(initObj);//{name: "xiaoye", age: 30, sex: undefined, addAge: ƒ}
console.log(tempObj);//{name: "xiaoye", age: 35, sex: undefined, addAge: ƒ}