前端必备小知识：拷贝方式深究

前言

在前端开发中，我们经常需要操作和传递数据。当从后端获取数据或将数据作为参数发送给另一个接口时，难免会遇到需要处理多余字段的情况。此时，了解和正确使用浅拷贝和深拷贝技术就显得尤为重要。

浅拷贝与深拷贝

浅拷贝和深拷贝是 JavaScript 中复制对象的不同方式。

• 浅拷贝： 创建一个新对象，其属性指向原始对象相同的内存地址。也就是说，浅拷贝的对象与原始对象共享相同的底层数据结构。
• 深拷贝： 创建一个完全独立的新对象，拥有自己的内存地址和数据结构。与原始对象没有共享的属性引用。

浅拷贝和深拷贝的区别

特征	浅拷贝	深拷贝
共享内存地址	是	否
修改新对象	也会修改原始对象	不会修改原始对象
性能	更快	更慢
适用场景	修改原始对象的数据	创建独立的数据副本

浅拷贝的应用场景

浅拷贝适用于以下场景：

• 当原始对象不会被修改时，只需创建对象的副本。
• 当数据量较小，性能要求较高时。

深拷贝的应用场景

深拷贝适用于以下场景：

• 当需要创建原始对象的完全独立副本时。
• 当原始对象会被修改，而这些修改不应影响新对象时。
• 当数据量较大，性能要求不高时。

实现浅拷贝和深拷贝

浅拷贝：

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

深拷贝：

使用第三方库，如：

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

或者递归实现：

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

  if (Array.isArray(originalObject)) {
    return originalObject.map(deepCopy);
  }

  const newObject = {};
  for (const key in originalObject) {
    newObject[key] = deepCopy(originalObject[key]);
  }

  return newObject;
}

实例

考虑以下示例：

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

• 浅拷贝：

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

在这种情况下，newObject 与 originalObject 共享对 address 对象的引用。如果修改 newObject 的 address，也会修改 originalObject 的 address。

• 深拷贝：

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

在这种情况下，newObject 创建了一个 address 对象的独立副本。如果修改 newObject 的 address，不会影响 originalObject 的 address。

结论

浅拷贝和深拷贝是前端开发中必备的小知识。通过了解它们的原理、区别和应用场景，开发者可以优化数据处理，提高代码健壮性，并写出更高质量的代码。