谈谈JS中的深度拷贝

在谈谈JS中的浅拷贝这篇文章中，我们提到了JS中的浅拷贝，也知道浅拷贝产生的原因，以及浅拷贝只在引用型数据类型中出现，那么今天我们就来谈谈如何进行深度拷贝！

concat与slice

var a = [1, 2, 3, 4, 5];
var b = a.slice();
// var b = a.concat();
b[0] = 12;
console.log(a);   //输出 [1, 2, 3, 4, 5]
console.log(b);   // 输出[12, 2, 3, 4, 5]

我们发现JS数组的这两个方法都能对数组进行深度复制。 缺点： 1、slice和concat方法只能用于数组 2、即使是像下面这种格式的也不能进行深度拷贝，因为第二层是对内存的引用

var a = [{
	x: 1,
	z: {
		b: 3
	}
}]
var c = a.slice();
// var c = a.concat();
c[0].x = 11;
c[0].z.b = 13;
console.log(a);  // a[0].x=11,  a[0].z.b=13
console.log(c);  // c[0].x=11,  c[0].z.b=13

ES6的解构

var a = [1, 2, 3, 4];
var b = [...a];
b[0] = 11;
console.log(a);  // 输出[1, 2, 3, 4]
console.log(b);  // 输出[11, 2, 3, 4]

缺点：只能解构数组，同样不能解构复杂的json，因为第二层同样是对内存的引用。

递归遍历复制

// 递归拷贝函数
function deepClone(obj){
  let objClone = Array.isArray(obj) ? [] : {};
  if(obj && typeof obj === "object"){
    for(key in obj){
      if(obj.hasOwnProperty(key)) {
        //判断ojb子元素是否为对象，如果是，递归复制
        if(obj[key]&&typeof obj[key] === "object"){
          objClone[key] = deepClone(obj[key]);
        }else{
          //如果不是，简单复制
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
} 

var a = [{
	x: 1,
	z: {
		b: 3
	}
}]
var c = deepClone(a);
c[0].x = 11;
c[0].z.b = 13;
console.log(a);  // 输出a[0].x=1,  a[0].z.b=3
console.log(c);  // 输出c[0].x=11,  c[0].z.b=13

parse和stringify

// stringify和parse的拷贝函数
function deepClone(val) {
	var obj = Array.isArray(val) ? [] : {};
	// 转化为字符串
	obj = JSON.stringify(val);
	// 返回对象
	return JSON.parse(obj);
}

var a = [{
	x: 1,
	z: {
		b: 3
	}
}]
var c = deepClone(a);
c[0].x = 11;
c[0].z.b = 13;
console.log(a);  // a[0].x=1,  a[0].z.b=3
console.log(c);  // c[0].x=11,  c[0].z.b=13

jq的$.extend方法

/**
 *
 * $.extend([deep], target, object1[,objectN])
 * deep: 拷贝类型，true为深度拷贝，false为浅拷贝
 * target：目标对象，其他对象将被附加到该对象上
 * object1[,objectN]：需要拷贝的对象，可以是多个对象
*/
var a = [{
	x: 1,
	z: {
		b: 3
	}
}]
var c = $.extend(true, [], a);
c[0].x = 11;
c[0].z.b = 13;
console.log(a);  // a[0].x=1,  a[0].z.b=3
console.log(c);  // c[0].x=11,  c[0].z.b=13

以上为常用的五种深度拷贝方法，希望对大家有所帮助，个人技术有限，如果大家还有其他更好的方法，欢迎留言，我会及时更新的，祝大家新年快乐！