前端小白深拷贝浅拷贝大揭秘：小白秒变拷贝大师

前端

2023-01-26 05:25:37

深拷贝与浅拷贝：揭秘对象复制的奥秘

作为一名前端开发菜鸟，我曾对深拷贝和浅拷贝这两个概念感到一头雾水。然而，经过一番刻苦钻研，我终于拨开了它们的迷雾，掌握了它们的精髓。现在，让我带你踏上这场探索之旅，揭开对象复制的奥秘。

理解深拷贝与浅拷贝

深拷贝和浅拷贝是 JavaScript 中用于复制对象的两大方法，它们之间存在着本质区别：

深拷贝： 深拷贝会将一个对象的全部属性（及其子属性）复制到另一个对象中，创建出两个完全独立的实体。也就是说，对新对象的任何修改都不会影响到原对象。
浅拷贝： 浅拷贝只复制一个对象的引用，而不是属性值本身。这意味着新对象和原对象共享相同的属性值，对新对象的任何操作也会同时影响到原对象。

应用场景

深拷贝和浅拷贝在不同的场景下各有其用武之地：

深拷贝：
- 创建独立对象： 当你需要创建一个与原对象完全独立的新对象时，深拷贝是最佳选择。例如，如果你有一个组件库，其中每个组件都存储着自己的状态数据，此时你需要修改某个组件的状态数据，同时不影响其他组件，就可以使用深拷贝创建一份新状态数据。
- 序列化和反序列化： 当你想将一个对象序列化为 JSON 字符串，然后再将其反序列化为一个新对象时，也需要用到深拷贝。因为 JSON 序列化只存储对象的属性值，而不会存储引用，所以不使用深拷贝的话，新对象和原对象将共享相同的属性值，导致对新对象的修改也会影响到原对象。
浅拷贝：
- 共享对象： 当你需要创建一个与原对象共享相同属性值的新对象时，浅拷贝可以派上用场。例如，如果你有一个经常在多个地方重复使用的组件，可以使用浅拷贝创建新的组件实例，这样可以节省内存和提升性能。
- 传递引用： 当你想将一个对象作为参数传递给一个函数，但又不想修改这个对象时，可以使用浅拷贝。通过传递一个对象的引用，你可以避免对原对象造成意外修改。

注意事项

在使用深拷贝和浅拷贝时，需要注意以下几点：

性能开销： 深拷贝的性能开销比浅拷贝更大，因此不要滥用深拷贝。
对象共享： 浅拷贝会创建对象引用，因此在使用浅拷贝时需要注意对象的引用关系。
具体需求： 在实际开发中，应该根据具体需求选择使用深拷贝还是浅拷贝。

代码示例

为了进一步加深理解，我们来看两个代码示例：

深拷贝：

const originalObject = {
  name: "John",
  age: 30,
  hobbies: ["coding", "gaming", "reading"]
};

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

deepCopyObject.name = "Mary";
deepCopyObject.hobbies.push("hiking");

console.log(originalObject); // { name: "John", age: 30, hobbies: ["coding", "gaming", "reading"] }
console.log(deepCopyObject); // { name: "Mary", age: 30, hobbies: ["coding", "gaming", "reading", "hiking"] }

浅拷贝：

const originalObject = {
  name: "John",
  age: 30,
  hobbies: ["coding", "gaming", "reading"]
};

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

shallowCopyObject.name = "Mary";
shallowCopyObject.hobbies.push("hiking");

console.log(originalObject); // { name: "Mary", age: 30, hobbies: ["coding", "gaming", "reading", "hiking"] }
console.log(shallowCopyObject); // { name: "Mary", age: 30, hobbies: ["coding", "gaming", "reading", "hiking"] }

正如你所看到的，深拷贝创建了一个完全独立的新对象，而浅拷贝只是创建了一个对原对象的引用。

常见问题解答