如何使用 ES6 的 Object.assign 实现深拷贝
在前端开发过程中，经常需要对一个对象进行深拷贝，即复制对象的所有属性和属性值。经常使用的方法是利用 JSON 对象的 parse 和 stringify 方法，但这种方法只适用于普通对象，对于内置对象和自定义对象并不适用。ES6 中新增了一个 Object.assign 方法，可以非常方便地实现深拷贝。
Object.assign 方法使用方法
Object.assign 方法是一个浅拷贝方法，用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，并且可以支持多个源对象。语法如下：
--------------------- -----------
其中，target 是目标对象，sources 是源对象，支持多个源对象。方法返回目标对象 target，如果出错则抛出错误。
Object.assign 方法可以用于拷贝一个普通对象：
--- --- - --- -- -- --- --- ------ - ----------------- ----- -------------------- -- --- -- -- --
Object.assign 方法也可以用于合并多个对象：
--- ---- - -------- ------- ------ ---- --- ---- - -------- ------ --------- -------- --- ---- - ------------------- ------ ------------------ -- ------ ------ ---- --- ------- ------- ------------------ -- ------ ------ ---- --- ------- ------- ------------------ -- ------ ------ ------- -------
使用 Object.assign 方法实现深拷贝
尽管 Object.assign 方法用于对象合并可以实现浅拷贝，但是对于深拷贝则无能无力。因此，如果要使用 Object.assign 方法实现深拷贝，则必须对其进行扩展。
首先，需要对 Object.assign 方法进行递归处理，以实现对目标对象及所有源对象的属性值的复制：
-------- ----------------- ----------- -
--- ----------- - ----------------- --------
---------------------- -- -
-- ------- ------ --- --------- -
--- ---- --- -- ------- -
-- ------- ----------- --- --------- -
---------------- - --------------------------- -------------
- ---- -
---------------- - ------------
-
-
-
---
------ ------------
-接下来，需要注意的是原对象和拷贝对象中的引用类型（Array、Date、RegExp、Function 等）。针对这种类型的引用，可以单独进行特殊处理：
-------- ----------------- ----------- -
--- ----------- - ----------------- --------
---------------------- -- -
-- ------- ------ --- --------- -
--- ---- --- -- ------- -
-- ------- ----------- --- --------- -
-- ---------------------------- -
---------------- - ----------------------------
- ---- -- ------------ ---------- ----- -
---------------- - --- ----------------------------
- ---- -- ------------ ---------- ------- -
---------------- - --- -------------------------- -------------------
- ---- -- ------------ ---------- --------- -
---------------- - ------------------------------
- ---- -
---------------- - --------------------------- -------------
-
- ---- -
---------------- - ------------
-
-
-
---
------ ------------
-最终实现的深拷贝函数 deepClone 如下：
-------- ----------------- ----------- -
-------- ------------------- -
--- ------ - ---
---------------- -- -
-- ------- ---- --- --------- -
-----------------------------
- ---- -
------------------
-
---
------ -------
-
--- ----------- - ----------------- --------
---------------------- -- -
-- ------- ------ --- --------- -
--- ---- --- -- ------- -
-- ------- ----------- --- --------- -
-- ---------------------------- -
---------------- - ----------------------------
- ---- -- ------------ ---------- ----- -
---------------- - --- ----------------------------
- ---- -- ------------ ---------- ------- -
---------------- - --- -------------------------- -------------------
- ---- -- ------------ ---------- --------- -
---------------- - ------------------------------
- ---- -
---------------- - --------------------------- -------------
-
- ---- -
---------------- - ------------
-
-
-
---
------ ------------
-使用示例
现在，我们可以使用 deepClone 方法对任何对象进行深拷贝了，包括数组、Date 对象、RegExp 对象、函数对象等：
--- --- - -
------- -------
------ ---
------- -
-
------- ------
------- -----
--
-
------- ------
------- -------
-
--
----------- --- -------
---------- --------
----------- ---------- -
------------------- ---------
-
--
--- ------ - ---------------
--------------------总结
本文介绍了如何使用 ES6 中的 Object.assign 方法实现深拷贝，并通过完整的代码示例展示了深拷贝的具体实现过程，同时特别注意处理了含有引用类型的对象。准确地使用 clone 函数，可以大大简化我们的编程工作。同时，在使用深拷贝时也要避免不必要的对象和性能损失。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64539b02968c7c53b07e6df6