浅谈js中的深浅拷贝

谈深浅拷贝以前咱们先来聊一聊对象

什么是对象？

对象用来存储键值对和更复杂的实体，能够经过花括号 {…} 和其中包含一些可选的属性来建立。属性是一个键值对，键是一个字符串（也叫作属性名），值能够是任何类型。

对象和其余原始的类型相比有一个很重要的区别，对象都是按引用存储复制的。

　　

let user = { name: 'John' };

let admin = user;

admin.name = 'Pete'; //  改变 "admin" 的引用

alert(user.name); // 'Pete', changes are seen from the "user" reference

上面的例子展现了只存在一个对象，就像咱们的一个抽屉带有两把钥匙，若是一个钥匙（admin）去使用了抽屉，稍后使用另一个钥匙（user）打开的时候，就会看到有变化。

复制一个对象的变量也等同于建立了此对象的另外一个引用。

那么咱们该怎么复制一个对象呢？建立一份独立的拷贝，一份复制？

这也是可行的，可是有一点麻烦，由于JS并无原生的方法支持这么作。实际上，咱们不多这么作。复制引用不少时候是好用的。

若是咱们真的想这么作，就须要建立一个新的对象，遍历现有对象的属性，在原始值的状态下复制给新的对象。

像这样：

let user = {
  name: "John",
  age: 30
};

let clone = {}; // 新的空对象

// 复制全部的属性值
for (let key in user) {
  clone[key] = user[key];
}

// 如今复制是独立的复制了
clone.name = "Pete"; // 改变它的值

alert( user.name ); // 原对象属性值不变

　　

咱们也能够用Object.assign 来实现。

像这样：

let user = {
  name: "John",
  age: 30
};

let clone = Object.assign({}, user);

　　

它复制了 user 对象全部的属性给了一个空对象，而后返回拷贝后的对象。事实上，这跟循环赋值同样，可是更短。

直到如今，咱们是假设全部的 user 属性都是原始值，可是若是对象属性指向对象呢？

像这样：

let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

let clone = Object.assign({}, user);

alert( user.sizes === clone.sizes ); // true，同一个对象

// user 和 clone 共享 sizes 对象
user.sizes.width++;       // 在这里改变一个属性的值
alert(clone.sizes.width); // 51，在这里查看属性的值

这个叫浅拷贝，为了解决上面的的问题，咱们在复制的时候应该检查 user[key] 的每个值，若是是一个对象，咱们再复制一遍这个对象，这叫作深拷贝。

有一个标准的深拷贝算法，解决上面和一些更复杂的状况，叫作 Structured cloning algorithm。为了避免重复造轮子，咱们使用它的一个 JS 实现的库 lodash, 方法名叫作 _.cloneDeep(obj)。