JavaScript深拷贝与浅拷贝实现详解

什么是拷贝？

在JavaScript中，我们经常需要将对象或者数组进行复制操作，这被称为拷贝。在拷贝过程中，我们需要注意两个概念：浅拷贝和深拷贝。

什么是浅拷贝？

浅拷贝仅仅是复制了对象或数组的引用，而并没有克隆对象或数组。也就是说，对于被拷贝的对象或数组，它们的属性仍然指向原对象或数组中的属性。浅拷贝通常使用的方法有：

Object.assign方法

const obj = {a: 1, b: 2};
const copy = Object.assign({}, obj);
console.log(copy); // {a: 1, b: 2}

扩展运算符（...）

const obj = {a: 1, b: 2};
const copy = {...obj};
console.log(copy); // {a: 1, b: 2}

需要注意的是，浅拷贝只能复制对象或数组的一层属性，如果被拷贝的对象或数组中还有嵌套的对象或数组，浅拷贝并不会进行递归拷贝。

什么是深拷贝？

深拷贝则是完全复制了对象或数组，包括对象或数组中的所有嵌套对象或数组，新的对象或数组和原对象或数组完全独立无关。深拷贝通常使用的方法有：

JSON.parse和JSON.stringify方法

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

需要注意的是，因为JSON.stringify方法无法处理Symbol、Date、函数等特殊类型，因此在深拷贝过程中这些类型会被忽略掉。

递归拷贝

function deepCopy(obj) {
  if (Array.isArray(obj)) {
    return obj.map(deepCopy);
  } else if (typeof obj === 'object' && obj !== null) {
    const copy = {};
    Object.keys(obj).forEach((key) => {
      copy[key] = deepCopy(obj[key]);
    });
    return copy;
  } else {
    return obj;
  }
}

const obj = {a: 1, b: {c: 2}};
const copy = deepCopy(obj);
console.log(copy); // {a: 1, b: {c: 2}}

递归拷贝可以完美地复制对象或数组中的所有属性，除了Symbol、Date、函数等特殊类型。

示例说明

示例一

const obj = {
  a: 1,
  b: {
    c: 2
  }
};
const copy1 = Object.assign({}, obj);
const copy2 = {...obj};
const copy3 = JSON.parse(JSON.stringify(obj));
const copy4 = deepCopy(obj);

obj.b.c = 3;

console.log(copy1); // {a: 1, b: {c: 3}}
console.log(copy2); // {a: 1, b: {c: 3}}
console.log(copy3); // {a: 1, b: {c: 2}}
console.log(copy4); // {a: 1, b: {c: 2}}

在这个示例中，我们首先定义了一个对象obj，其中包含一个嵌套对象b。然后我们使用了四种方法分别对obj进行了浅拷贝和深拷贝。接着，我们修改了obj.b.c的值为3，然后输出了四个拷贝的结果。可以看到，浅拷贝的两种方法都会随着原对象的改变而发生改变，而深拷贝的两种方法则不受原对象的影响。

示例二

const arr = [1, 2, [3, 4]];
const copy1 = arr.slice();
const copy2 = [...arr];
const copy3 = JSON.parse(JSON.stringify(arr));
const copy4 = deepCopy(arr);

arr[2][0] = 5;

console.log(copy1); // [1, 2, [5, 4]]
console.log(copy2); // [1, 2, [5, 4]]
console.log(copy3); // [1, 2, [3, 4]]
console.log(copy4); // [1, 2, [3, 4]]

在这个示例中，我们首先定义了一个数组arr，其中包含一个嵌套数组。然后我们使用了四种方法分别对arr进行了浅拷贝和深拷贝。接着，我们修改了arr[2][0]的值为5，然后输出了四个拷贝的结果。可以看到，浅拷贝的两种方法都会随着原数组的改变而发生改变，而深拷贝的两种方法则不受原数组的影响。

总结

浅拷贝和深拷贝是JavaScript中常用的拷贝方式，每种方式都有其优缺点。在实际应用中，我们需要根据具体的情况选择合适的拷贝方式，以保证拷贝的结果符合预期。