JS复制对象的秘密：揭秘JavaScript中的对象复制方法

2022-11-19 16:41:14

对象复制：JavaScript 中创建副本的指南

在 JavaScript 中，对象复制是一个基本操作，它允许我们创建新对象并对其进行修改，而不会影响原始对象。通过对象复制，我们可以轻松地创建多个对象并根据需要对其进行修改，而无需担心修改原始对象。

浅拷贝

浅拷贝是最简单的对象复制方法。它通过创建一个新对象并将其与原始对象的所有属性关联来工作。这意味着浅拷贝的新对象将包含原始对象的所有数据，但对原始对象中的引用的对象不会进行复制。

示例：

const originalObject = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main Street",
    city: "Anytown",
    state: "CA",
    zip: "12345",
  },
};

const shallowCopy = Object.assign({}, originalObject);

在上面的示例中，shallowCopy 是 originalObject 的浅拷贝。这意味着它包含与 originalObject 相同的属性值，但 address 属性是一个引用类型，它指向同一内存中的对象。因此，对 shallowCopy.address 的任何更改都会影响 originalObject.address。

深拷贝

深拷贝是一种更全面的复制方法。它通过递归遍历对象及其所有引用对象来工作。这确保了创建的副本包含原始对象及其所有相关对象的完全副本。

示例：

const originalObject = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main Street",
    city: "Anytown",
    state: "CA",
    zip: "12345",
  },
};

const deepCopy = JSON.parse(JSON.stringify(originalObject));

在上面的示例中，deepCopy 是 originalObject 的深拷贝。这意味着它包含 originalObject 的完全副本，包括 address 对象的副本。因此，对 deepCopy.address 的任何更改都不会影响 originalObject.address。

数组复制

数组也是一种对象，因此可以使用上面讨论的浅拷贝和深拷贝方法进行复制。但是，数组还有一些专用的复制方法，这些方法可以更方便地复制数组。

示例：

const originalArray = [1, 2, 3, 4, 5];

const shallowCopy = originalArray.slice();

const deepCopy = [...originalArray];

在上面的示例中，shallowCopy 是 originalArray 的浅拷贝，deepCopy 是 originalArray 的深拷贝。slice() 方法创建了一个新数组，其中包含与 originalArray 相同的元素，但它不会复制数组中的引用对象。... 操作符创建了一个新数组，其中包含 originalArray 的所有元素，包括引用对象的副本。