解锁数据存储利器：JavaScript 中的对象复制、浅拷贝和深拷贝指南

前端

2023-11-20 13:16:06

揭秘对象复制：复制对象的三种方式

在 JavaScript 中，对象复制是指创建一个新对象，使其包含与原始对象相同的数据。这种操作对于各种场景非常有用，例如：

当您需要在不修改原始对象的情况下使用对象时。
当您需要将对象传递给函数时，但不想让函数修改该对象时。
当您需要创建对象的备份时。

JavaScript 中有三种方法可以复制对象：

1. 浅拷贝：复制对象的第一层

浅拷贝是指仅复制对象的第一层属性。换句话说，它只会复制对象本身的数据，而不会复制嵌套的对象或数组。浅拷贝可以使用以下两种方法实现：

使用 Object.assign() 方法：

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

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

使用展开运算符 (...):

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

const shallowCopy = {...originalObject};

2. 深拷贝：复制对象的所有层

深拷贝是指复制对象的所有层，包括嵌套的对象和数组。深拷贝可以使用以下两种方法实现：

使用 JSON.parse() 和 JSON.stringify() 方法：

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

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

使用递归函数：

function deepCopy(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }

  if (Array.isArray(obj)) {
    const copy = [];
    for (const item of obj) {
      copy.push(deepCopy(item));
    }
    return copy;
  }

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

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

const deepCopy = deepCopy(originalObject);

3. 结构性克隆算法 (SCA)：最彻底的拷贝方式

结构性克隆算法 (SCA) 是 JavaScript 中复制对象最彻底的方式。它可以复制对象的所有属性，包括非枚举属性、符号属性和弱引用属性。SCA 目前只在 V8 引擎中实现，因此仅适用于 Chrome 和 Node.js。

要使用 SCA 复制对象，可以使用以下代码：

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

const deepCopy = structuredClone(originalObject);