今天来整理一下js中的深浅拷贝

深浅拷贝

简单来说，假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着A一起变了，说明这是浅拷贝，如果B没有变，那就是深拷贝。

看例题

//案例1var a1 = 1;var a2 = a1;console.log(a1); //1console.log(a2); //1a2 = 2; //修改 a2console.log(a1); //1console.log(a2); //2//案例2var o1 = { x: 1, y: 2 };var o2 = o1;console.log(o1); //{x: 1, y: 2}console.log(o2); //{x: 1, y: 2}o2.x = 2; //修改o2.xconsole.log(o1); //{x: 2, y: 2}console.log(o2); //{x: 2, y: 2}

按照常规思维，o1应该和a1一样，不会因为另外一个值的改变而改变，而这里的o1却随着o2的改变而改变了。同样是变量，为什么表现不一样呢？为了更好的理解js的深浅拷贝，我们先来理解一些js基本的概念。这里可以看看前面的文章(点击后面文字查看)：javascript基础部分。看完了基础部分的知识，我们再回到上面的案例，案例1中的值(a1、a2)为基本类型，案例2中的值(o1、o2)为引用类型。案例2中的赋值就是典型的浅拷贝，并且深拷贝与浅拷贝的概念只存在于引用类型。

如何实现深拷贝

首先分别看看Array和Object自有方法是否支持深拷贝：

• 在通过数组和对象的自有方法来解决深拷贝之前，先附上之前整理的笔记(点击后面文字查看)：js中数组的常用方法；js中对象的常用方法

Array

• Array中可以使用slice()和 concat()方法来解决深拷贝的问题

//(1).slice()var arr1 = ["a", "b"];var arr2 = arr1.slice();console.log(arr1); // ["a", "b"]console.log(arr2); // ["a", "b"]arr2[0] = "c"; //修改arr2console.log(arr1); // ["a", "b"]console.log(arr2); // ["c", "b"]

//(2). concat()var arr1 = ["a", "b"];var arr2 = arr1.concat();console.log(arr1); // ["a", "b"]console.log(arr2); // ["a", "b"]arr2[0] = "c"; //修改arr2console.log(arr1); // ["a", "b"]console.log(arr2); // ["c", "b"]//通过上述两种方法，arr2的修改并没有影响到arr1，看来深拷贝的实现并没有那么难嘛。

• slice()/concat()方法只能实现一维数组的深拷贝

//我们把arr1改成二维数组再来看看：var arr1 = ["a", "b", ["c", "d"]];var arr2 = arr1.concat();arr2[2][1] = 100;console.log(arr1); //['a', 'b', ['c', 100]]console.log(arr2); //['a', 'b', ['c', 100]]//这里arr2又改变了arr1

• 还可以借用jquery库中的extend()方法来解决深拷贝的问题

var a = [0, 1, [2, 3], 4];var b = $.extend(true, [], a);a[0] = 1;a[2][0] = 1; //console.log(a); //[1,1,[1,3],4]console.log(b); //[0,1,[2,3],4]

Object

• JSON.stringify()以及JSON.parse()来实现深拷贝

var obj = {  name: "yml",  age: 18,};var obj2 = JSON.parse(JSON.stringify(obj));obj.name = "NiceY";console.log(obj); // {name: "NiceY", age: 18}console.log(obj2); // {name: "yml", age: 18}// 使用JSON.stringify()以及JSON.parse()它是不可以拷贝 undefined,function,RegExp等等类型的

• Object.assign(target, source)来实现深拷贝

var obj1 = {  a: 1,  b: 2,  c: ["a", "b", "c"],};var obj2 = Object.assign({}, obj1);obj2.b = 5;console.log(obj1.b); // 2console.log(obj2.b); // 5obj2.c[1] = 5;console.log(obj1.c); // ["a", 5, "c"]console.log(obj2.c); // ["a", 5, "c"]

//可以assign对于一层对象来说是没有任何问题的，但是如果对象的属性对应的是其它的引用类型的话，还是只拷贝了引用，修改的话还是会有问题

• 利用对象的深拷贝实现原理

//定义一个新的对象，遍历源对象的属性并赋给新对象的属性var obj = {  name: "yml",  age: 18,};var obj2 = new Object();obj2.name = obj.name;obj2.age = obj.age;

obj2.name = "NiceY";console.log(obj); //Object {name: "yml", age: 18}console.log(obj2); //Object {name: "NiceY", age: 18}

理解了以上的基本思想，我们就可以自己封装一个方法deep来实现对象的深拷贝，代码如下:

var Animal = {  name: "Ani",  color: ["red", "blue"],  child: {    age: 18,  },  say: function () {    console.log("I am", this.name, "color:", this.color);  },};function deep(dest, obj) {  var o = dest;  for (var key in obj) {    if (typeof obj[key] === "object") { //判断是不是对象      o[key] = obj[key].constructor === Array ? [] : {};      deep(o[key], obj[key]);    } else {      o[key] = obj[key];    }  }  return o;}deep(Animal); //返回的对象与Animal一样

END