js高级—理解浅拷贝和深拷贝

1、浅拷贝只是拷贝一层，更深一层对象级别的值拷贝引用。也就是拷贝了内存地址。
2、深拷贝拷贝多层，每一级别的数据都会拷贝。也就是会重新开辟一个新的空间进行存储，修改的话不会影响原数据。
浅拷贝案例代码：

//案例一 只拷贝一层
var obj = {
     
	id:1,
	name:'lisi'
}
var newObj={
     }
//应用for in 遍历对象
for(var k in obj){
     
//k是属性名 也就是id、name
//obj[k]属性值 得到的就是对象里面的1、lisi
	newObj[k] = obj[k];
}
console.log(newObj) 

打印结果：

更深一层的对象拷贝，虽然也可以拷贝，但是拷贝的是原来对象的地址。如下案例：

//案例二 更深层次的对象级别拷贝
var obj = {
     
	id:1,
	name:'lisi'
	msg:{
     
  		age:18
  }
}
var newObj={
     }
//应用for in 遍历对象
for(var k in obj){
     
	newObj[k] = obj[k];
}
console.log(newObj);
newObj.msg.age = 20; // 修改新对象里面的值,会影响原对象的值
console.log('---obj打印结果如下---');
console.log(obj);

打印结果

以上案例使用原生js方法，可以使ES6的新增方法实现一句话搞定浅拷贝。

// 第一个参数为要拷贝给谁  第二个参数为 要拷贝哪一个对象
Object.assign(newObj, obj); //  实现效果和上面的一样

利用函数递归的思想来实现深拷贝
深拷贝案例代码：

var obj1 = {
     
	id: 1,
	name: 'lisi',
	msg: {
     
		age: 18,
	},
	color: ['red', 'green'],
};
var obj2 = {
     };
// 封装函数
function deepCope(newObj, oldobj) {
     
	for (var k in oldobj) {
     
	//判断属性值属于那种数据类型
	// 1、获取属性值 oldobj[k]
	var item = oldobj[k];
// 2、判断这个值是否是数组 要先判断数组 因为数组也是属于对象型
	if (item instanceof Array) {
     
		newObj[k] = [];// 相当于obj2.color = [] 也就是说这个属性里面传的必须是一个数组
		deepCope(newObj[k], item);
	} else if (item instanceof Object) {
     
		// 3、判断这个值是否是对象
		newObj[k] = {
     };
		deepCope(newObj[k], item);
	} else {
     
		// 4、属于简单数据类型
		newObj[k] = item;
	}
  }
}
deepCope(obj2, obj1); // 调用函数 并传入要拷贝的对象
console.log(obj1);
obj2.msg.age = 20;
console.log('---修改后obj2打印结果如下---');
console.log(obj2);

打印结果：

可以看出修改后未改变原对象的值。