逐层剖析 JavaScript 对象拷贝

2023-11-19 14:27:18

浅拷贝与深拷贝：了解 JavaScript 中的对象复制

在 JavaScript 中，对象复制是操作对象的关键概念。根据您复制对象的方式，您会遇到两种不同的方法：浅拷贝和深拷贝。了解这两种方法之间的差异至关重要，这样您就可以根据需要选择正确的工具。

什么是浅拷贝？

浅拷贝是一种简单的方法，它复制对象本身的属性值，但不复制嵌套的对象或数组的值。换句话说，它创建一个新对象，该对象包含原始对象的相同属性，但对于任何嵌套对象或数组，它仅复制引用。

浅拷贝的实现

可以使用 Object.assign() 方法或扩展运算符（...）轻松实现浅拷贝。

// 使用 Object.assign()
const newObject = Object.assign({}, originalObject);

// 使用扩展运算符
const newObject = {...originalObject};

浅拷贝的局限性

浅拷贝虽然简单，但存在一个重大局限性：如果原始对象包含引用类型的值（如对象或数组），则浅拷贝只会复制对这些值的引用，而不是复制值本身。这意味着对浅拷贝对象的修改也会影响原始对象。

什么是深拷贝？

深拷贝是一种更彻底的方法，它不仅复制对象本身的属性值，还递归地复制嵌套的对象和数组的值。换句话说，它创建一个新对象，该对象包含原始对象的完全独立副本。

深拷贝的实现

可以通过 JSON.parse() 和 JSON.stringify() 方法或递归或循环来实现深拷贝。

// 使用 JSON.parse() 和 JSON.stringify()
const newObject = JSON.parse(JSON.stringify(originalObject));

// 使用递归
const newObject = deepCopy(originalObject);
function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  if (Array.isArray(obj)) {
    return obj.map(deepCopy);
  }
  const newObj = {};
  for (const key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }
  return newObj;
}