在前端开发中，我们经常需要对对象进行操作，特别是在复制对象时。早期我们可以使用 for...in 循环进行遍历并复制对象，但这种方式存在一些问题，比如可能会漏掉某些属性或方法。ES7 中新增了一个复制现有对象的功能方法——Object.assign()，它可以很方便地复制对象并合并属性。本文将介绍 Object.assign() 的使用方法，并提供示例代码和实际应用场景。
Object.assign() 的使用方法
Object.assign() 方法可以将一个或多个源对象的可枚举属性复制到目标对象中，返回目标对象。语法如下：
Object.assign(target, ...sources)
其中，target 是目标对象，...sources 是一个或多个源对象。如果某个源对象和目标对象有相同的属性，则源对象的属性会覆盖目标对象的属性。如果有多个源对象有相同的属性，则后面的源对象会覆盖前面的源对象。
示例代码如下：
-- -------------------- ---- ------- ----- ---- - - -- -- -- - -- ----- ---- - - -- -- -- - -- ----- ---- - - -- -- -- - -- ----- ------ - ----------------- ----- ----- ------ -------------------- -- - -- -- -- -- -- -- -- - -
在这个例子中，我们使用了 Object.assign() 方法将三个对象合并成一个新对象，并且后面的对象的属性覆盖了前面的对象的相同属性。注意，我们传递了一个空对象作为第一个参数 target，这是因为我们想创建一个新对象而不是在原有对象上进行修改。
需要注意的是，Object.assign() 只会复制源对象的自身属性，而不会复制它的原型链上的属性。
实际应用场景
在日常前端开发中，Object.assign() 可以用来实现深拷贝和浅拷贝。
浅拷贝
当需要复制一个对象时，我们可以使用 Object.assign() 方法进行浅拷贝。这意味着只会复制对象的属性值而不会复制属性值所引用的对象。
示例代码如下：
-- -------------------- ---- -------
----- ---- - -
-- --
-- -
-- -
-
--
-- ---
----- ---- - ----------------- ------
------ - --
-------- - --
------------------ -- - -- -- -- - -- - - -
------------------ -- - -- -- -- - -- - - -在这个例子中，我们使用 Object.assign() 方法进行浅拷贝，然后修改了 obj1 对象的属性值。结果发现 obj2 对象的属性值也被修改了，这是因为 obj2 对象只是 obj1 对象的一个浅拷贝，它们共享了同一个 b 对象。
深拷贝
当需要复制一个对象并且希望属性值所引用的对象也被复制时，我们需要使用深拷贝。可以使用第三方库如 Lodash 来实现深拷贝，也可以使用 JSON.parse() 和 JSON.stringify() 来实现深拷贝。
示例代码如下：
-- -------------------- ---- -------
----- ---- - -
-- --
-- -
-- -
-
--
-- ---
----- ---- - ---------------------------------
------ - --
-------- - --
------------------ -- - -- -- -- - -- - - -
------------------ -- - -- -- -- - -- - - -在这个例子中，我们使用 JSON.parse() 和 JSON.stringify() 方法进行深拷贝。JSON.stringify() 方法将一个对象转换为字符串，JSON.parse() 方法将一个字符串转换为对象。这样我们就可以得到一个深拷贝的对象，它们之间没有任何关系，修改一个对象的属性值不会影响到另一个对象。
总结
Object.assign() 方法是一个非常实用的对象复制方法，它可以帮助我们轻松地合并对象并复制属性。在实际应用中，我们可以通过 Object.assign() 方法来实现浅拷贝和深拷贝等功能。通过本文的介绍，相信你已经了解了 Object.assign() 方法的使用方法，同时也知道了它的实际应用场景和注意事项。希望本文能够帮助你更好地理解和使用 Object.assign() 方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647dbc48968c7c53b088bba0