浅拷贝和深拷贝的区别
1.浅拷贝：将源对象或者原数组的引用 ```直接赋给``` 新对象/新数组 ，新对象/新数组只是```对原对象的一个引用``` 2.深拷贝：创建一个新的对象或者数组，将源对象的各项属性的值拷贝过来是“值”而不是“引用”
为什么要使用深拷贝
希望在改变新数组/对象的时候，不改变原数组/对象
深拷贝的要求程度
我们在使用深拷贝的时候，一定要弄清楚我们对深拷贝的要求程度： 是仅仅“深”拷贝第一层级的对象属性或数组元素，还是递归拷贝所有层级的对象属性和数组元素？
简单的对象深拷贝使用JSON.parse 和JSON.stringify 但是遇到undefined、function、Symbol的时候会在转换过程中忽略，也就是复制不了这些类型的数据。eg:
var syb = Symbol('obj');
var person = {
name:'tino',
say:function(){
console.log('hi')
}，
ok:syb,
un:undefined
};
var copy = JSON.parse(JSON.stringify(person)); //{name:'tino'}
如上所述，如果要复制的对象里面含有这些数据将不被拷贝，然后我们再换一个方法，我们自己封装一个函数来解决。
var arr = [{name:"塞内加尔",color:"pink"},{name:"乌斯怀亚",color:"orange"}];
function deepCopy(obj){
var result = Array.isArray(obj)?[]:{};
for(var key in obj){
if(obj.hasOwnProperty(key)){
if(typeof obj[key]==="object"){
result[key] = deepCopy(obj[key]); //递归复制
}else{
result[key] = obj[key];
}
}
}
return result;
}
console.log(deepCopy(person));
//{
// name:'tino',
// say:function(){
// console.log('hi')
// }，
// ok:syb,
// un:undefined
//}
console.log(arr);// [{name:"塞内加尔",color:"pink"},{name:"乌斯怀亚",color:"orange"}]
如何检验深拷贝成功
改变任意一个新对象/数组的值，如果原对象/数组的值不变就成功，否则失败。
浅拷贝的第一种方法
function copyFunc(data){
let obj = {};
for(let i in data){
obj[i] = data[i];
}
return obj;
}
var obj = {
a:"hello",
b:{
a:"world",
b:21
},
c:["Bob","Tom","Jenny"],
d:function(){
alert("hello world")
}
};
var qiancopy =copyFunc(obj);
qiancopy.a = "a is changed";
qiancopy.b.a = "b.a is changed";
qiancopy.b.b = "b.b is changed";
qiancopy.c = [1,2,3];
qiancopy.d = function(){
alert('d is changed')
};
console.log('a-'+obj.a); //'hello'
console.log('a-'+qiancopy.a) ; //'changed'
console.log('b.a-'+obj.b.a);// 'b.a is changed'
console.log('b.a-'+qiancopy.b.a) ;// 'b.a is changed'
console.log('b.b-'+obj.b.b); //'b.b is changed'
console.log('b.b-'+qiancopy.b.b) ; // 'b.b is changed'
console.log('c-'+obj.c); //'["Bob","Tom","Jenny"]'
console.log('c-'+qiancopy.c) ; //[1,2,3]
console.log('d-'+obj.d); //function(){alert('hello world')}
console.log('d-'+qiancopy.d) ; //function (){alert("d is changed")}
//事实上就是只有对象是拷贝的引用类型
image.png
对象的值改变是因为浅拷贝他们的值指向同一个对象
浅拷贝就是拷贝了一层，除了对象是拷贝的引用类型，其他都是直接将值传递，有自己的内存空间的。
浅拷贝的第二种方法
ES6的Object.assign()方法，object.assign是es6的新函数。Object.assign()方法可已经任意多个的原对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是object.assign()进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。
var obj2= {
a:"1",
b:{
a:"b.a",
b:"b.b"
},
e:3
}
var copyAssign = Object.assign({},obj,obj2);//obj为上面定义的
//如果引用的源对象有属性重复，去最后那个，如果有新属性，直接加进去
