DEV Community ·

JavaScript中的浅拷贝与深拷贝

💡 原文英文，约400词，阅读约需2分钟。

📝

内容提要

在JavaScript中，复制对象和数组有浅拷贝和深拷贝两种方式。浅拷贝只复制第一层，嵌套对象共享引用，通常使用扩展运算符或Object.assign；深拷贝复制所有层，互不影响，常用JSON或structuredClone()。简单对象用浅拷贝，复杂对象用深拷贝。

🎯

在JavaScript中，复制对象和数组有浅拷贝和深拷贝两种方式。
浅拷贝只复制第一层，嵌套对象共享引用。
浅拷贝可以使用扩展运算符或Object.assign。
深拷贝复制所有层，互不影响，常用JSON或structuredClone()。
简单对象使用浅拷贝，复杂对象使用深拷贝。
浅拷贝示例：const shallow1 = { ...original };
深拷贝示例：const deep = JSON.parse(JSON.stringify(original));
浅拷贝方法包括：const copy1 = { ...original }; 和 const copy2 = Object.assign({}, original);
数组的浅拷贝可以使用const copy1 = [...originalArray]; 或 originalArray.slice();
深拷贝方法包括使用JSON和structuredClone()，后者支持更多数据类型。
使用Lodash库的cloneDeep方法也可以实现深拷贝。
简单对象使用浅拷贝，复杂对象使用深拷贝以确保独立性。

🔎

浅拷贝仅复制对象的第一层，嵌套对象仍然共享引用。这意味着对嵌套对象的修改会影响原对象，可能导致意外的错误。在处理复杂数据结构时，开发者需谨慎选择浅拷贝，以避免数据不一致的问题。

深拷贝适用于需要完全独立副本的情况，尤其是当对象中包含嵌套对象时。使用JSON方法虽然简单，但会丢失函数和特殊对象类型。structuredClone()方法则提供了更全面的支持，适合现代开发需求。

在选择浅拷贝或深拷贝时，开发者应考虑对象的复杂性和使用场景。简单对象可以使用浅拷贝以提高性能，而复杂对象则应使用深拷贝以确保数据的独立性和完整性。

❓

浅拷贝只复制对象的第一层，嵌套对象共享引用；深拷贝复制所有层，互不影响。

可以使用扩展运算符({ ...original })或Object.assign({}, original)来实现浅拷贝。

深拷贝可以使用JSON.parse(JSON.stringify(original))或structuredClone()，也可以使用Lodash库的cloneDeep方法。

当对象简单且没有嵌套对象时，使用浅拷贝即可。

深拷贝提供了完全独立的副本，修改一个对象不会影响另一个对象。

使用JSON进行深拷贝会移除函数、日期、undefined、Map、Set等数据类型。

🏷️