深拷贝还是浅拷贝？举一反三，彻底搞定JS拷贝原理

2024-01-06 02:49:42

一、从最日常的代码出发，深入浅出理解深浅拷贝

在日常编码中，我们经常会遇到需要拷贝对象或数组的情况。而JavaScript作为一门强大的编程语言，提供了两种拷贝方式：浅拷贝和深拷贝。

1. 浅拷贝

浅拷贝是指只拷贝对象或数组的引用，而不是实际的值。这意味着，如果原始对象或数组发生改变，则浅拷贝的对象或数组也会发生改变。

举个例子，我们有一个对象：

const person = {
  name: 'John Doe',
  age: 30
};

如果我们使用浅拷贝创建一个新的对象：

const personCopy = person;

那么，personCopy和person将指向同一个内存地址。如果我们修改personCopy，那么person也会受到影响。

2. 深拷贝

深拷贝是指不仅拷贝对象或数组的引用，还拷贝实际的值。这意味着，如果原始对象或数组发生改变，则深拷贝的对象或数组不会受到影响。

为了实现深拷贝，我们需要遍历对象或数组的每个属性，并为每个属性创建一个新的副本。

举个例子，我们仍然使用上面的person对象：

const personCopy = JSON.parse(JSON.stringify(person));

使用这种方法，我们可以创建一个personCopy的深拷贝。如果我们修改personCopy，那么person将不会受到影响。

二、深入浅出，全面掌握深拷贝的原理和区别

1. 深拷贝原理

深拷贝的原理是：创建一个新的对象或数组，然后遍历原始对象或数组的每个属性，并为每个属性创建一个新的副本。

这个过程可以递归进行，直到遍历完原始对象或数组的所有属性。

2. 浅拷贝与深拷贝的区别

浅拷贝和深拷贝的区别在于：浅拷贝只拷贝对象或数组的引用，而深拷贝则拷贝实际的值。

这意味着，如果原始对象或数组发生改变，则浅拷贝的对象或数组也会发生改变，而深拷贝的对象或数组不会受到影响。

三、从头开始，手把手教你手写深拷贝函数

1. 手写深拷贝函数的步骤

创建一个新的对象或数组。
遍历原始对象或数组的每个属性。
为每个属性创建一个新的副本。
将新副本添加到新的对象或数组中。
重复步骤2-4，直到遍历完原始对象或数组的所有属性。

2. 手写深拷贝函数的代码示例

function deepCopy(obj) {
  if (Array.isArray(obj)) {
    return obj.map(item => deepCopy(item));
  } else if (typeof obj === 'object') {
    const newObj = {};
    for (const key in obj) {
      newObj[key] = deepCopy(obj[key]);
    }
    return newObj;
  } else {
    return obj;
  }
}