在 JavaScript 编程中，深拷贝和浅拷贝是两个重要的概念。深拷贝指的是将一个对象的所有属性值都复制到一个新的对象中，而浅拷贝则只是将对象的引用复制到一个新的对象中。本文将介绍 JavaScript 中深拷贝和浅拷贝的实现方法及其区别，并提供示例代码和指导意义。
深拷贝
深拷贝是将一个对象的所有属性值都复制到一个新的对象中，包括原对象中嵌套的对象和数组。实现深拷贝的方法有很多，在本文中我们将介绍两种方法。
递归实现深拷贝
递归实现深拷贝是最常见的方法之一。它通过遍历对象的属性值，如果是对象则继续递归遍历，直到找到基本类型的属性。然后将属性复制到新对象中，最后返回新对象。
-------- -------------- -
--- ----- - ---
--- ---- --- -- ---- -
-- ------- -------- --- -------- -- -------- --- ----- -
---------- - --------------------
- ---- -
---------- - ---------
-
-
------ ------
-上面的代码实现了一个递归实现深拷贝的函数。该函数接受一个对象作为参数，并返回一个新的对象。
JSON.parse 和 JSON.stringify 方法实现深拷贝
使用 JSON.parse 和 JSON.stringify 方法也可以实现深拷贝。该方法通过将对象转换成 JSON 字符串，再将 JSON 字符串转换为新对象实现深拷贝。
-------- -------------- - ------ -------------------------------- -
上面的代码实现了使用 JSON.parse 和 JSON.stringify 方法实现深拷贝的函数。该函数接受一个对象作为参数，并返回一个新的对象。
浅拷贝
浅拷贝是将对象的引用复制到一个新的对象中。实现浅拷贝的方法有很多，在本文中我们将介绍两种方法。
Object.assign 方法实现浅拷贝
Object.assign 方法可以将多个对象的属性合并到一个新的对象中。它可以用于实现浅拷贝。
--- ---- - - -- -- -- - -- --- ---- - - -- - -- --- ---- - ----------------- ----- ------ ------------------ -- --- -- -- -- -- --
上面的代码实现了使用 Object.assign 方法实现浅拷贝的方法。该方法接受多个对象作为参数，并返回一个新的对象。
扩展运算符实现浅拷贝
扩展运算符也可以用于实现浅拷贝。它可以将一个对象的所有属性复制到一个新的对象中。
--- ---- - - -- -- -- - -- --- ---- - - ------- -- ------------------ -- --- -- -- --
上面的代码实现了使用扩展运算符实现浅拷贝的方法。它使用 ...obj1 将 obj1 对象的所有属性复制到一个新对象中。
深拷贝和浅拷贝的区别
深拷贝和浅拷贝是两个不同的概念。深拷贝将一个对象的所有属性值都复制到一个新的对象中，包括原对象中嵌套的对象和数组。而浅拷贝则只是将对象的引用复制到一个新的对象中。
深拷贝的优点是它完全复制了原对象的所有属性值，而没有引用了原对象。因此，新对象和原对象互不干扰。但深拷贝的缺点是它比浅拷贝更消耗资源，因为它需要递归复制嵌套的对象和数组。
浅拷贝的优点是它不会递归复制嵌套的对象和数组。因此，浅拷贝比深拷贝更快速。但浅拷贝的缺点是它复制了对象的引用。如果新对象修改了某个属性，原对象也会受到影响。
结论
深拷贝和浅拷贝是 JavaScript 开发中常用的技术。深拷贝通过递归遍历对象的属性值实现，而浅拷贝则只是将对象的引用复制到新对象中。本文介绍了 JavaScript 中深拷贝和浅拷贝的实现方法及其区别，并提供了示例代码和指导意义。在应用深拷贝和浅拷贝时，应根据具体情况选择不同的方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67088884d91dce0dc8721b7f