详解js中的浅拷贝与深拷贝

1、前言

1.1 栈（stack）和堆（heap）

• 栈(stack):由操作系统自动分配释放 ，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；
• 堆(heap)：一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收，分配方式倒是类似于链表

1.2 基本数据类型和引用数据类型

1.2.1 概念

• 基本数据类型：Number、String、Boolean、Null、 Undefined、Symbol（ES6）；
• 引用数据类型：Object、Array、Function、Date、RegExp、Map、Set等。

1.2.2 区别

两者区别：

• 内存地址分配:
  1）基本数据类型:将值存储在栈中 ,栈中存放的是对应的值
  2）引用数据类型:将对应的值存储在堆中,栈中存放的是指向堆内存的地址
• 赋值变量：
  1）基本数据类型：是生成相同的值，两个对象对应不同的地址
  2）引用数据类型：是将保存对象的内存地址赋值给另一个变量。也就是两个变量指向堆内存中同一个对象

1.2.3 基本类型赋值方式

var a = 1;
var b = a;
b = 2;
请问 a 显示是几？ 

答案是1，a是基本类型，存储在栈中；把a赋值给b，虽然两个变量的值相等，但是两个变量保存了两个不同的内存地址。

1.2.4 引用类型赋值方式

var a = { name: "a" };
var b = a;
b.name = "b";
请问现在 a.name 是多少？

答案为：“b”。我们通过var b = a执行一次复制引用类型的操作。引用类型的赋值，仅仅只是复制引用类型的一个地址指针。当地址指针相同时，他们在内存中访问到的具体对象实际上是同一个，因此b.name ='b’使堆内存中对象的value值变化，a.name的值也随之变化。

2、浅拷贝

2.1 概念

会在栈中开辟另一块空间，并将被拷贝对象的栈内存数据完全拷贝到该块空间中，即基本数据类型的值会被完全拷贝，而引用类型的值则是拷贝了“指向堆内存的地址”。

注意：只拷贝对象的一层数据，再深处层次的引用类型value将只会拷贝引用

2.2 常见的浅拷贝方法

• Object.assign()
• 扩展运算符(…)
• Array.concat()
• Array.slice()

2.2.1 Object.assign()

object.assign 是 ES6 中 object 的一个方法，该方法可以用于JS 对象的合并等多个用途，其中一个用途就是可以进行浅拷贝。

object.assign 的语法为：Object.assign(target, …sources)

var obj = { 
	x: 1, 
	y: 2,
	z: { 
		num: 10 
	} 
}
var newObj = {}
Object.assign(newObj, obj)
newObj.y = 3
console.log(obj)  
console.log(newObj) 

注意：

• Object.assign()不会拷贝对象的继承属性；
• Object.assign()不会拷贝对象的不可枚举的属性；
• Object.assign()可以拷贝 Symbol 类型的属性。

2.2.2 扩展运算符(…)

扩展运算符的语法为：let cloneObj = { …obj };

/* 对象的拷贝 */
const obj = {
 a: 1,
 b: {
   c: 1
 }
}
const obj2 = {
 ...obj
}
obj.a = 2

console.log(obj) // obj.a的值不受影响
console.log(obj2); 

obj.b.c = 2

console.log(obj) 
// 一层拷贝，遇到引用类型的值就会只拷贝引用，obj2.b.c的值也会变为2
console.log(obj2);  
/* 数组的拷贝 */
let arr = [1, 2, 3];
let newArr = [...arr]; // 跟arr.slice()是一样的效果

2.2.3 Array.concat()

var obj1 = ["Chinese", { "name": "zs" }, "French"]
var obj2 = obj1.concat()
obj2[1].name = "ls"
obj2[2] = "China"
console.log(obj1, obj2);

注意：数组的 concat 方法其实也是浅拷贝，所以连接一个含有引用类型的数组时，需要注意修改原数组中的元素的属性，因为它会影响拷贝之后连接的数组。不过 concat 只能用于数组的浅拷贝，使用场景比较局限。

2.2.4 Array.slice()

slice 的语法为：arr.slice(begin, end);

var arr = [2, 4, 6, { y: 10 }]
var newArr = arr.slice()
newArr[0] = 10
newArr[3].x = 20
newArr[3].y = 30
console.log(arr)
console.log(newArr)

注意：slice 方法也比较有局限性，因为它仅仅针对数组类型。slice 方法会返回一个新的数组对象，这一对象由该方法的前两个参数来决定原数组截取的开始和结束位置，是不会影响和改变原始数组的。但是，数组元素是引用类型的话，也会影响到原始数组。

3、深拷贝

3.1 概念

深拷贝是拷贝多层，每一级别的数据都会拷贝出来。

3.2 常见的深拷贝方法

• JSON.parse(JSON.stringify(obj))
• 递归方法
• 函数库 lodash

3.2.1 JSON.parse(JSON.stringify(obj))

原理:用 JSON.stringify 将对象转成 JSON 字符串，再用 JSON.parse()
把字符串解析成对象。一去一来，新的对象就产生了，而且对象会开辟新的栈，实现深拷贝。

let a = {name: '张三', age: 19, like: ['打篮球', '唱歌', '跳舞']}
let b = JSON.parse(JSON.stringify(a))
a.name = '李四'
a.like[0] = '睡觉'
console.log(a)  
console.log(b)  

但是，JSON.stringify并不是那么完美的，它也有局限性。

• 拷贝的对象的值中如果有函数、undefined、symbol 这几种类型，经过 JSON.stringify 序列化之后的字符串中这个键值对会消失；
• 拷贝 Date 引用类型会变成字符串；
• 无法拷贝不可枚举的属性；
• 无法拷贝对象的原型链；
• 拷贝 RegExp 引用类型会变成空对象；
• 对象中含有 NaN、Infinity 以及 -Infinity，JSON 序列化的结果会变成 null；
• 无法拷贝对象的循环应用，即对象成环 (obj[key] = obj)。

let obj = {
	 func: function () { alert(1) },
	 obj: { a: 1 },
	 arr: [1, 2, 3],
	 und: undefined,
	 reg: /123/,
	 date: new Date(0),
	 NaN: NaN,
	 infinity: Infinity,
	 sym: Symbol('1')
}

Object.defineProperty(obj, 'innumerable', {
	enumerable: false,
	value: 'innumerable'
});

console.log('obj', obj); // { NaN: NaN , arr: (3) [1, 2, 3] ,date: Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间) {}, func: ƒ(), infinity: Infinity , obj: { a: 1 } , reg: /123/, sym: Symbol(1), und: undefined, innumerable: "innumerable" }

const str = JSON.stringify(obj);

const obj1 = JSON.parse(str);

console.log('obj1', obj1); // { NaN: null, arr: (3) [1, 2, 3], date: "1970-01-01T00:00:00.000Z", infinity: null, obj: {a: 1}, reg: {} }

3.2.2 递归

这种方法基于手动递归复制对象及其属性，直到所有属性都是基本数据类型为止。

function deepClone(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }
  const newObj = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepClone(obj[key]);
    }
  }
  return newObj;
}

const originalObj = {
  name: "John",
  age: 30,
  address: {
    city: "Beijing",
    country: "China",
  },
};

const newObj = deepClone(originalObj);
newObj.address.city = "Guangzhou";
console.log("originalObj:", originalObj);
console.log("newObj:", newObj);

3.2.2 函数库lodash

lodash是一个著名的javascript原生库，不需要引入其他第三方依赖。是一个意在提高开发者效率,提高JS原生方法性能的JS库。简单的说就是，很多方法lodash已经帮你写好了，直接调用就行，不用自己费尽心思去写了，而且可以统一方法的一致性。Lodash使用了一个简单的_ 符号，就像Jquery的 $ 一样，十分简洁。lodash函数库提供 _.cloneDeep用来做深拷贝。

	let _ = require('lodash');
	let obj = {
	    a:1,
	    b:{f:{g:1}},
	    c:[1,2,3]
	};
	let newObj = _.cloneDeep(obj);
	console.log(obj.b.f === newObj.b.f); //true

4、应用场景

• 浅拷贝主要用于你需要拷贝的对象的数据结构只有基础数据类型，并且你不想改变原数据类型或者需要对比操作前后的数据。
• 深拷贝主要用于你想操作该数据，但是又不想影响到原数据的时候，就可以进行深拷贝。