JS深拷贝与浅拷贝一文彻底搞懂

什么是深拷贝与浅拷贝

在JavaScript中，由于对象和数组是通过引用传递的，所以需要特别注意拷贝的方式。拷贝的方式可以分为两种：深拷贝和浅拷贝。

深拷贝会复制一个对象或数组，包括其所有的嵌套属性和子元素，而浅拷贝只是复制了对象或数组本身，并没有复制嵌套的属性或子元素。

深拷贝

以下是一种常见的深拷贝方法，通过递归函数来实现：

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

上述代码中，首先判断传入的参数是否为对象或数组，如果不是则直接返回。如果是，则判断是对象还是数组，使用不同的方法创建一个新的对象或数组，并循环原对象或数组中的所有属性或子元素，使用递归的方式对其进行深拷贝。

一个示例：

let originalObj = {
  a: 1,
  b: {
    c: 2
  }
};
let clonedObj = deepClone(originalObj);
originalObj.b.c = 3;

console.log(originalObj); // {a: 1, b: {c: 3}}
console.log(clonedObj); // {a: 1, b: {c: 2}}

在这个示例中，我们创建了一个原始对象originalObj，然后使用deepClone方法进行深拷贝得到一个新的对象clonedObj。接着，我们对原始对象originalObj的b.c属性进行修改，并输出两个对象的值。可以发现，修改原始对象并不会影响到克隆对象，证明深拷贝是生效的。

浅拷贝

以下是三种常见的浅拷贝方法：

方法一：对象的扩展运算符（Spread Operator）

let originalObj = {
  a: 1,
  b: {
    c: 2
  }
};
let copiedObj = {...originalObj};
originalObj.b.c = 3;

console.log(originalObj); // {a: 1, b: {c: 3}}
console.log(copiedObj); // {a: 1, b: {c: 3}}

在这个示例中，我们使用了对象的扩展运算符...进行浅拷贝。新对象copiedObj中的b属性与原始对象中的b属性指向同一个引用，所以修改原始对象中的b.c属性也会影响到新对象中的b.c属性。

方法二：Object.assign()方法

let originalObj = {
  a: 1,
  b: {
    c: 2
  }
};
let copiedObj = Object.assign({}, originalObj);
originalObj.b.c = 3;

console.log(originalObj); // {a: 1, b: {c: 3}}
console.log(copiedObj); // {a: 1, b: {c: 3}}

在这个示例中，我们使用了Object.assign()方法进行浅拷贝。同样，新对象copiedObj中的b属性与原始对象中的b属性指向同一个引用，修改原始对象中的b.c属性也会影响到新对象中的b.c属性。

方法三：数组的slice()方法

let originalArr = [1, 2, 3];
let copiedArr = originalArr.slice();
originalArr.push(4);

console.log(originalArr); // [1, 2, 3, 4]
console.log(copiedArr); // [1, 2, 3]

在这个示例中，我们使用了数组的slice()方法进行浅拷贝。新数组copiedArr与原始数组中的元素是值拷贝关系，因此修改原始数组并不会影响到新数组。

总结

在JavaScript中，深拷贝和浅拷贝是两种常见的拷贝方式。深拷贝会复制一个对象或数组，包括其所有的嵌套属性和子元素，而浅拷贝只是复制了对象或数组本身，并没有复制嵌套的属性或子元素。

对于深拷贝，可以使用递归函数的方式进行实现。对于浅拷贝，可以使用对象的扩展运算符、Object.assign()方法或数组的slice()方法进行实现。在实际应用中，需要根据具体情况选择合适的拷贝方式，特别是对于嵌套的对象或数组，需要特别注意选择深拷贝或浅拷贝方式。