浅谈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)。