深浅拷贝及实现方式

JS数据类型分为基本数据类型和引用数据类型，基本数据类型保存的是值，引用类型保存的是引用地址(this指针)。浅拷贝共用一个引用地址，深拷贝会创建新的内存地址。

浅拷贝：只拷贝第一级属性，如果某个属性又是一个内嵌的子对象，不会进入子对象中拷贝子对象的内容
深拷贝：即可用第一级属性，如果某个属性又是一个内嵌的子对象，深拷贝会进入子对象中，继续拷贝内嵌子对象及其内容

浅拷贝方法

• 直接对象赋值
• Object.assign

深拷贝

• JSON.stringify转为字符串再JSON.parse转对象
• 深度递归遍历

基本数据类型：string、 number、boolean、undefined、null
引用数据类型：Object、Array、Function

一.浅拷贝

1. 直接对象赋值

let a = [0,1,2,3,4];
b = a;
console.log(a === b);
a[0] = 1;
console.log(a, b)

结果：

2. 解构赋值

var obj1 = {
     a: 1, b: 2}
var obj2 = {
     ...obj1}
obj2.a = 4
console.log(obj1, obj2)

3. Object.assign:实现浅拷贝及一层的深拷贝
   对象的合并 ES6中的Object.assign()，第一个参数必须是个空对象。

Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。
注意点！严格来说，Object.assign() 既不是深拷贝，也不是浅拷贝——而是第一级属性深拷贝，第一级以下的级别属性浅拷贝。

let obj1 = {
      
	a: {
      b: 1}, 
	c: 2
}
let obj2 = Object.assign({
     },obj1)
obj2.a.b = 3;  //第二层，obj1变了，是浅拷贝
obj2.c = 3;  //第一层，obj1不变，是深拷贝
console.log(obj1);  
console.log(obj2); 

二.深拷贝

1. JSON.stringify转为字符串再JSON.parse

JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象
缺点：当值为undefined、function、symbol 会在转换过程中被忽略

function deepClone(obj) {
     
	let _obj = JSON.stringify(obj);
	let objClone = JSON.parse(_obj);
	return objClone;
}
let a = [0, 1, [2, 3], 4]
let b = deepClone(a)
a[0] = 1
a[2][0] = 1
console.log(a)  // [1,1,[1,3],4]
console.log(b)  // [0,1,[2,3],4]

2. 深度递归遍历

function deepClone(oldObj) {
     
	if (oldObj==null) {
     
		return null;
	}
	if (typeof oldObj !=="object") {
     
		return oldObj;
	}
	var newObj = Array.isArray(oldObj)?[]:{
     };
	for (var key in oldObj) {
     
		newObj[key] = deepClone(oldObj[key]);
	}
	return newObj;
}

let a1 = 10;
let arr1 = [1, 2, 3];
let lilei = {
     
	sname:"Li Lei",
	sage:11,
	address:{
     
		city:"北京",
		street:"万寿路"
	}
}

let a2 = deepClone(a1);
console.log(a2);
let arr2 = deepClone(arr1);
console.log(arr2);
console.log(arr1 == arr2);
var lilei1 = deepClone(lilei);
console.log(lilei1);
console.log(lilei == lilei1); //false
console.log(lilei.address == lilei1.address); //false

3. jquery实现深拷贝
   jquery 提供一个 $.extend 可以用来做深拷贝；

var obj = {
     a:{
     name:"kaiqin",age:19}};
var obj1 = {
     b:{
     name:"wang",age:19}};
var obj2 = $.extend(true,{
     },obj,obj1); //true为深拷贝，false为浅拷贝，默认为false
obj2.a.name="zhang";
console.log(obj2)
//{a: {name: "zhang", age: 19},b: {name: "wang", age: 19}}
console.log(obj)
//{
     {a:{name:"kaiqin",age:19}}}