在前端开发中，我们经常需要拷贝 JavaScript 对象，以便在程序中安全地操作数据。Object.assign 方法提供了浅拷贝和深拷贝两种拷贝方式，可以帮助我们在处理数据时更加便捷、高效。本文将详细介绍 Object.assign 方法的使用方法和注意事项，帮助读者更好地掌握该技术，提高开发效率。
什么是浅拷贝和深拷贝
在 Javascript 中，拷贝对象分为浅拷贝和深拷贝两种。
浅拷贝：复制对象的引用地址，并未开辟新的内存空间。新的变量存储的是原始值的地址引用，所以当原始值被修改时，原始值和新对象的值都会发生变化。
深拷贝：完全克隆一个原值，开辟新的内存空间存储，新变量和原始变量之间互不影响。实现深拷贝的方法有很多，比如 JSON.stringify 和 JSON.parse 组合，Lodash 库等。在本文中，我们将重点介绍 使用 Object.assign 实现深拷贝。
Object.assign 方法的基本使用方法
Object.assign 方法可以用于合并两个或多个对象属性，它通常用于从源对象复制属性到目标对象。该方法的语法如下：
Object.assign(target, ...sources)
其中，target 是目标对象，sources 是一个或多个源对象。Object.assign 方法会依次将每个源对象中的可枚举属性进行浅拷贝，即复制属性的值，最后返回目标对象。如果目标对象中已经存在同名属性，则源对象中的属性将覆盖目标对象中的同名属性。
下面是一个简单的示例，展示了使用 Object.assign 方法合并两个对象的属性。
const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };
const result = Object.assign(target, source);
console.log(result);
// { a: 1, b: 3, c: 4 }在上面的示例中，我们首先定义了两个对象 target 和 source，然后使用 Object.assign 方法合并它们的属性，并将结果存放在变量 result 中。由于源对象 source 中有一个和目标对象中同名的属性 b，所以最终目标对象 target 中的属性 b 的值被覆盖为了源对象 source 中的属性值 3。
Object.assign 实现浅拷贝
Object.assign 函数在拷贝对象时，复制的是原对象的引用地址，没有真正创建出一个新对象，所以 Object.assign 实现的是浅拷贝。
以下是一个示例，展示了使用 Object.assign 方法进行浅拷贝。
-- -------------------- ---- ------- ----- ---- - - -- - -- - - -- ----- ---- - ----------------- ------ ---------------------- -- - ---------------------- -- - -------- - -- ---------------------- -- - ---------------------- -- -
在上面的示例中，我们首先定义了一个对象 obj1，其中包含了一个属性 a，它的值是一个对象 { b: 1 }。然后，我们使用 Object.assign 方法来对 obj1 进行浅拷贝，生成一个新的对象 obj2。我们发现，obj2 中的 a 属性和 obj1 中的 a 属性引用了同一个内存地址，即 Object.assign 并没有真正创建出一个新对象，它只是将 obj1 的引用复制到了新对象中。当我们修改 obj1 中 a 属性的值时，obj2 中的 a 属性的值也跟着改变了。
Object.assign 实现深拷贝
由于 Object.assign 函数实现的是浅拷贝，当我们需要进行深拷贝时，需要使用一些其他的方法来实现。下面的示例演示了如何使用 Object.assign 来实现深拷贝。
-- -------------------- ---- -------
-------- ------------- -
-- ---------------
-- ------- --- --- -------- -- --- --- ----- -
------ ----
-
-- --------
-- -------------------- -
----- ---- - ---
------------------ -- -
--------------------------
---
------ -----
-
-- --------
----- ---- - ---
------------------------------ -- -
--------- - -------------------
---
------ -----
-
----- ---- - - -- - -- - - --
----- ---- - ---------------
---------------------- -- -
---------------------- -- -
-------- - --
---------------------- -- -
---------------------- -- -以上深拷贝函数中定义了三个 if 判断，用于判断拷贝值的类型，实现拷贝基本类型、对象和数组的代码略有不同。在拷贝对象时，我们使用了 Object.keys 方法来遍历对象的属性，并使用递归来实现对嵌套对象的深拷贝。
总结
Object.assign 方法是一个简单而常用的浅拷贝方法，可以快速复制原始对象的属性和方法。但是在拷贝嵌套对象和数组时需要小心，因为它只会拷贝引用地址。为了实现深拷贝，我们可以使用一些其他的方法，如 JSON.stringify 和 JSON.parse 组合，或者 Lodash 库。熟练掌握这些技巧，可以极大的提高前端开发的效率，让我们的代码更加安全稳定。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f9666980a9b385b8ff858