JavaScript深度解析：手写实现浅拷贝和深拷贝

前端

2023-11-01 16:52:26

浅拷贝和深拷贝：深入浅出地理解

什么是浅拷贝和深拷贝？

当我们想要复制一个对象时，我们会使用浅拷贝或深拷贝。浅拷贝只复制基本数据类型的值，而深拷贝会复制基本数据类型的值和引用数据类型的地址。

浅拷贝

浅拷贝使用赋值运算符（=）来创建新对象。新对象指向与原始对象相同的内存地址，因此对新对象的任何修改都会影响原始对象。

深拷贝

深拷贝使用递归算法来创建新对象。它会逐层复制原始对象，为引用数据类型创建新的副本。这样，对新对象的任何修改都不会影响原始对象。

浅拷贝和深拷贝的实现

浅拷贝

const a = {
  name: 'John',
  age: 20,
  address: {
    city: 'New York',
    state: 'New York'
  }
};

const b = a; // 浅拷贝

b.name = 'Mary'; // 修改 b.name

console.log(a.name); // Mary

深拷贝

const deepCopy = (obj) => {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  if (Array.isArray(obj)) {
    const newObj = [];
    for (let i = 0; i < obj.length; i++) {
      newObj.push(deepCopy(obj[i]));
    }
    return newObj;
  }

  const newObj = {};
  for (const key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }
  return newObj;
};

const a = {
  name: 'John',
  age: 20,
  address: {
    city: 'New York',
    state: 'New York'
  }
};

const b = deepCopy(a); // 深拷贝

b.name = 'Mary'; // 修改 b.name

console.log(a.name); // John

浅拷贝和深拷贝的区别

浅拷贝只复制基本数据类型的值，而深拷贝会复制基本数据类型的值和引用数据类型的地址。这意味着浅拷贝创建的新对象与原始对象共享相同的内存地址，而深拷贝创建的新对象具有自己的内存地址。

浅拷贝和深拷贝的应用

浅拷贝适合复制基本数据类型的值，如数字、字符串和布尔值。深拷贝适合复制包含引用数据类型（如对象和数组）的对象。

常见问题解答

为什么浅拷贝不适用于包含引用数据类型（如对象和数组）的对象？
浅拷贝会创建新对象，但会指向与原始对象相同的内存地址。因此，对新对象的任何修改都会影响原始对象。深拷贝会创建新对象并为引用数据类型创建新的副本，避免了这种问题。
何时应该使用浅拷贝？
浅拷贝适合复制基本数据类型的值，因为不需要创建新副本。例如，如果我们要复制一个数字，则可以使用浅拷贝，因为数字是一个基本数据类型。
何时应该使用深拷贝？
深拷贝适合复制包含引用数据类型（如对象和数组）的对象。例如，如果我们要复制一个包含用户数据的对象，则可以使用深拷贝，因为用户数据可能是引用数据类型。
浅拷贝和深拷贝哪个更有效率？
浅拷贝比深拷贝更有效率，因为它只需要复制基本数据类型的值。深拷贝需要遍历整个对象并为引用数据类型创建新副本，这可能会降低效率。
浅拷贝和深拷贝哪个更安全？
深拷贝比浅拷贝更安全，因为它创建了对象的完全独立副本。这意味着对新对象的任何修改都不会影响原始对象。浅拷贝不会创建新副本，因此对新对象的任何修改都可能影响原始对象。