在前端开发过程中，我们经常需要对对象进行复制和合并。ECMAScript 2017 中，Object.assign() 方法被引入，从而可以更便捷地实现对象的合并和复制。然而，Object.assign() 方法在复制对象时仍然存在深度复制的局限性。在本文中，我们将探讨这些局限性及其解决方案。
Object.assign()方法
Object.assign() 方法用于合并两个或多个对象的属性。它接受一个目标对象和一个或多个源对象，并将源对象的属性复制到目标对象中。如果源对象中存在相同的属性名，后面的对象会覆盖前面的对象。
const target = { a: 1 }; const source1 = { b: 2 }; const source2 = { c: 3 }; const result = Object.assign(target, source1, source2); console.log(result); // { a: 1, b: 2, c: 3 }
在上面的示例中，目标对象为 target，源对象为 source1 和 source2。Object.assign() 方法将 source1 和 source2 的属性复制到 target 中，并返回新的目标对象 result。
深度复制的局限性
虽然 Object.assign() 方法可以进行对象的合并和浅复制，但它无法进行深度复制。当我们需要复制多层嵌套的对象时，Object.assign() 方法只能复制其最外层的属性，并不能递归地复制嵌套对象的属性。
const obj1 = { a: 1, b: { c: 2 } }; const obj2 = Object.assign({}, obj1); console.log(obj2); // { a: 1, b: { c: 2 } } obj1.b.c = 3; console.log(obj2); // { a: 1, b: { c: 3 } }
在上面的示例中，我们首先定义了一个对象 obj1，其中包含一个嵌套的对象 b。然后，我们使用 Object.assign() 方法将 obj1 复制到一个新的对象 obj2 中。最后，我们修改了 obj1.b.c 的值，发现 obj2.b.c 的值也被改变了。这是因为 Object.assign() 方法只进行了浅复制。
解决方案
要解决 Object.assign() 方法无法进行深度复制的问题，我们需要使用其他的方法。本文将介绍两种深度复制对象的方法：递归复制和 JSON 序列化与反序列化。
递归复制
递归复制的思路是，先判断当前属性是否为对象。如果是对象，则递归地调用复制函数。如果是基本数据类型，则直接进行复制。这样可以保证每个对象的属性都被递归地复制。
-- -------------------- ---- ------- -------- ---------------- - -- -------- -- ------ ------ --- --------- - ------ ------- - ----- ------ - --------------------- - -- - --- ------------------------------- -- - -- ------------ -- ------ ----------- --- --------- - ----------- - ---------------------- - ---- - ----------- - ------------ - --- ------ ------- - ----- ---- - - -- -- -- - -- - - -- ----- ---- - --------------- ------------------ -- - -- -- -- - -- - - - -------- - -- ------------------ -- - -- -- -- - -- - - -展开代码
在上面的示例中，我们定义了一个深度复制函数 deepCopy()，用于递归地复制对象。首先，我们判断传入的对象是否为对象类型，或者是否为空。如果是基本数据类型或者为空，则直接返回原对象。如果是对象类型，则先创建一个目标对象，然后遍历源对象的属性。如果属性值是对象类型，则递归地进行复制。否则，直接将属性值复制到目标对象中。
JSON 序列化与反序列化
另一种深度复制对象的方法是使用 JSON 序列化和反序列化。在这种方法中，我们首先将对象序列化为 JSON 字符串，然后再将其反序列化为新的对象。由于 JSON 不支持函数和循环引用等特殊类型，因此这种方法只适用于基本的非嵌套数据类型和简单的对象。
const obj1 = { a: 1, b: { c: 2 } }; const obj2 = JSON.parse(JSON.stringify(obj1)); console.log(obj2); // { a: 1, b: { c: 2 } } obj1.b.c = 3; console.log(obj2); // { a: 1, b: { c: 2 } }
在上面的示例中，我们使用 JSON.stringify() 方法将 obj1 序列化为 JSON 字符串。然后，我们使用 JSON.parse() 方法将其反序列化为新的对象 obj2。由于 JSON 不支持函数和循环引用等特殊类型，因此我们必须确保 obj1 不包含这样的特殊类型。
总结
本文介绍了 ECMAScript 2017 中的 Object.assign() 方法以及其局限性。当复制对象时需要进行深度复制时，我们可以使用递归复制和 JSON 序列化与反序列化两种方法。这些方法都有其各自的优缺点，根据实际情况选择合适的方法进行对象复制。希望本文能够帮助您更好地使用 ECMAScript 2017 中的 Object.assign() 方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64852e3b48841e9894417641
