深拷贝和浅拷贝的理解

为什么要使用深拷贝和浅拷贝？

当你想复制一个对象时，一般做法是obj2=obj1,但是当你改动obj2的时候，会影响到obj1，而obj1也会影响到obj2,所以需要深拷贝和浅拷贝来解决对象的直接赋值仍然‘连接’的问题。

深拷贝和浅拷贝

浅拷贝：复制一份引用，让所有引用对象指向一份数据，并且可以修改这份数据，即只对指针拷贝，并都指向同一个内存空间。系统默认浅拷贝。

拷贝时只拷贝一级元素，不能拷贝子元素

es5和es6的浅克隆不一样，es6的更简单，而es5中用到for..in..的语法，

给一个对象，编写一个函数，使其可以拷贝一个对象，返回这个拷贝得到的新对象

demo：
解构赋值（浅拷贝）

function clone(obj){
    return {...obj};
}

var a = {a:1, b:2, c:3, d:[0, 1, 2]}
var b = clone(a);
console.log(b.d[1]); //1
b.d[1] = 2;
console.log(b.d[1]); //2
console.log(a.d[1]); //2

object.assign()浅拷贝

function clone(obj){
    return Object.assign({},obj);
}

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，允许至少两个参数，第一个参数为拷贝的目标对象，在方法执行结束后会被返回，其余参数将作为拷贝来源。

深拷贝：复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。

array的slice和concat

• arrayObj.slice(start, [end]) ,返回一个数组的一半，如果省略end，则一直复制到末尾
• concat() 方法用于连接两个或多个数组。
  该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

var arr = ["One","Two","Three"];

var arrtoo = arr.slice(0);
arrtoo[1] = "set Map";
document.writeln("数组的原始值：" + arr + "<br />");//Export:数组的原始值：One,Two,Three
document.writeln("数组的新值：" + arrtoo + "<br />");//Export:数组的新值：One,set Map,Three


var arrtooo = arr.concat();
arrtooo[1] = "set Map To";
document.writeln("数组的原始值：" + arr + "<br />");//Export:数组的原始值：One,Two,Three
document.writeln("数组的新值：" + arrtooo + "<br />");//Export:数组的新值：One,set Map To,Three

json对象的paese和stringify

• parse：可以将JSON字符串反序列化成JS对象
• stringify方法可以将JS对象序列化成JSON字符串

缺点：深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成Object。同时如果对象中存在循环引用的情况也无法正确处理。

demo：

var source = { name:"source", child:{ name:"child" } } 
var target = JSON.parse(JSON.stringify(source));
target.name = "target";  //改变target的name属性
console.log(source.name); //source 
console.log(target.name); //target
target.child.name = "target child"; //改变target的child 
console.log(source.child.name); //child 
console.log(target.child.name); //target child
//例2
var source = { name:function(){console.log(1);}, child:{ name:"child" } } 
var target = JSON.parse(JSON.stringify(source));
console.log(target.name); //undefined
//例3
var source = { name:function(){console.log(1);}, child:new RegExp("e") }
var target = JSON.parse(JSON.stringify(source));
console.log(target.name); //undefined
console.log(target.child); //Object {}