详解JS变量存储深拷贝和浅拷贝

什么是拷贝？

拷贝是将原来的变量复制一份新的变量，使得新的变量与原变量相互独立，对新的变量的修改不会对原变量产生任何影响。

浅拷贝

在 JS 中，浅拷贝指的是将原始对象的引用复制给新的对象，如果原始对象发生变化，则新对象也会随之发生变化。示例如下：

const originalObj = {
  a: {
    b: 1
  },
  c: 2
}
const newObj = Object.assign({}, originalObj);
newObj.a.b = 3;
console.log(originalObj.a.b); // 3
console.log(newObj.a.b); // 3

可以看到，修改 newObj.a.b 后，originalObj.a.b 的值也改变了。

深拷贝

深拷贝是指将原始对象完全复制一份新的对象，使得新的对象与原始对象彻底独立，对新对象的修改不会影响到原始对象。实现深拷贝的方式有多种，下面列出其中几种实现方式。

方法一：递归

递归是一个很容易想到的方式，可以遍历对象的所有属性，然后逐一复制。示例如下：

function deepClone(obj) {
  const newObj = obj.constructor === Array ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key];
    }
  }
  return newObj;
}
const originalObj = {
  a: {
    b: 1
  },
  c: 2
}
const newObj = deepClone(originalObj);
newObj.a.b = 3;
console.log(originalObj.a.b); // 1
console.log(newObj.a.b); // 3

可以看到，修改 newObj.a.b 后，originalObj.a.b 的值不会改变。

方法二：JSON.parse 和 JSON.stringify

由于 JSON 格式只能存储基本数据类型和简单对象类型，因此利用 JSON 格式序列化和反序列化可以实现深拷贝。示例如下：

const originalObj = {
  a: {
    b: 1
  },
  c: 2
}
const newObj = JSON.parse(JSON.stringify(originalObj));
newObj.a.b = 3;
console.log(originalObj.a.b); // 1
console.log(newObj.a.b); // 3

可以看到，修改 newObj.a.b 后，originalObj.a.b 的值不会改变。

总结

浅拷贝和深拷贝之间区别很大，浅拷贝只是复制了原始对象引用，而深拷贝复制了整个对象。实现深拷贝的方式多种多样，需要根据实际需求选择不同的方式进行实现。