深浅拷贝及应用场景

什么是拷贝

拷贝是由英文copy的音译词，拼音是kǎo bèi。copy意为复制、摹本。拷贝有四种解释：

1、指一个计算机系统的DOS命令，意为“复制”，是一个新名词，广泛地应用于IT的各个领域；

2、指由底片复制出来供放映电影用的胶片，如巴金的《随想录·再谈<望乡>》中说到：“我们最初就是根据这个拷贝放映的。”；

3、指复写，如拷贝纸、拷贝笔等；

4、指现在的一个流行语，指复印、照抄、抄袭等意思，贬义词

分类

拷贝的分类主要是针对对象的，可以分为深拷贝和浅拷贝

浅拷贝

原理

我们知道，对象都是按地址引用进行访问的，浅拷贝的复制只复制了第一层的属性，并没有递归将所有的值复制过来，所以，操作拷贝数据，对原数据产生了影响，故而为浅拷贝

应用场景

从服务器fetch到数据之后我将其存放在store中，通过props传递给界面，然后我需要对这堆数据进行修改，那涉及到的修改就一定有保存和取消，所以我们需要将 这堆数据拷贝到其它地方。

深拷贝

原理

深拷贝就是对目标的完全拷贝，不像浅拷贝那样只是复制了一层引用，就连值也都复制了。
只要进行了深拷贝，它们老死不相往来，谁也不会影响谁。
使用深拷贝可以使新创建的对象和原来的完全脱离关系

应用场景

当你想使用某个对象的值，在修改时不想修改原对象，那么可以用深拷贝弄一个新的内存对象。像es6的新增方法都是深拷贝，所以推荐使用es6语法

实现深拷贝

1.var obj2 = JSON.parse(JSON.stringify(obj))

2.var obj = {name:'123',age:13};
  var obj2 = {...obj}

3.var obj = {name:'123',age:13};
  var obj2 = Object.assign({},obj);

4.var obj1 = {name:"123"};
  var obj2 = {};
  for(x in obj1) {
		obj2[x] = obj1[x];
  }
 5.var obj = {
			name:'张飒',
			age:18,
			sex:'男',
			arr:[1,5,9,2,5,8],
			o:{
				name:'爱是当你',
				age:80,
				a:{
					x:999
				}
			},
			fn:function(){
				
			}
		}
		
		var obj2 = {};
		
		
		
		function Deep(oldObj,newObj){
			for(var i in oldObj){
				//对oldObj进行循环  将对象中每一个属性值都取出
				var item = oldObj[i];
				//对属性值进行判断   查看属性值 是复杂类型还简单类型
				
				if(item instanceof Function){//1.如果属性值为function类型  则直接赋值即可
				
					newObj[i] = oldObj[i];
					
				}else if(item instanceof Array){//2.如果属性值为数组类型 则在新对象中创建一个空数组
				
					newObj[i] = [];
					Deep(item,newObj[i]); //将创建的空数组 和 item(旧数组)  传入函数中 重新进行循环添加
					
				}else if(item instanceof Object){//3.如果属性值为对象类型 则在新对象中创建一个空对象
					newObj[i] = {};
					
					Deep(item,newObj[i]); //将创建的空对象 和 item(旧对象)  传入函数中 重新进行循环添加
				}else{
					//最后走到这里 为简单数据类型  直接复制即可
					newObj[i] = oldObj[i];
				}
			}
		}
		
		Deep(obj,obj2);
		
		console.log(obj)
		console.log(obj2)