Object.assign() 是一种在 JavaScript 中合并对象的常见方法。它可以将一个或多个对象的属性复制到目标对象中。不过，在使用 Object.assign() 时，我们可能会遇到一些常见的错误。
错误 1：在复制过程中丢失属性
当我们使用 Object.assign() 合并两个对象时，有时会出现一些属性丢失的情况。比如：
-- -------------------- ---- ------- ----- ------ - - ----- ------- ---- ---- -- ----- ------ - - ----- ------- ------- -------- -- ----- ------ - --------------------- -------- -------------------- -- - ----- ------- ---- ----- ------- -------- -
在这个例子中，我们期望结果是 { name: "Jane", age: "30", gender: "female" }，但实际上却只有 { name: "Jane", age: "30" }。这是因为 Object.assign() 仅仅复制 source 中的属性，并没有将其全部合并到目标对象中。
解决方法：在复制前先确保目标对象包含所有的属性。
-- -------------------- ---- ------- ----- ------ - - ----- ------- ---- ---- -- ----- ------ - - ----- ------- ------- -------- -- ----- ------ - ----------------- ------- -------- -------------------- -- - ----- ------- ---- ----- ------- -------- -
错误 2：合并时不应该包含原型属性
在使用 Object.assign() 合并对象时，我们有时可能会不小心包含原型属性。比如：
-- -------------------- ---- ------- -------- ------------ ---- - --------- - ----- -------- - ---- - ---------------------- - ---------- - ------------------- -- ---- -- ---------------- -- ----- ------ - --- -------------- ---- ----- ------ - ----------------- -------- -------------------- -- - ----- ------- ---- --- ------ ---------- ------ -
在这个例子中，我们只想复制 person 对象的 name 和 age 属性，但是 Object.assign() 却复制了 greet 方法，这是因为原型属性也会被复制。
解决方法：使用 Object.getOwnPropertyNames() 方法过滤掉原型属性。
-- -------------------- ---- -------
-------- ------------ ---- -
--------- - -----
-------- - ----
-
---------------------- - ---------- -
------------------- -- ---- -- ----------------
--
----- ------ - --- -------------- ----
----- ------ - -----------------
-------------------------------------
------------ -- ---- --- --------------
--------- -- -- ------- ------------ ---
--
--------------------
-- - ----- ------- ---- -- -错误 3：复制过程中解构对象
在使用 Object.assign() 合并对象时，我们有时可能会不小心解构对象。比如：
-- -------------------- ---- ------- ----- ------ - --- ----- ------ - - ----- ------- ---- -- - ----- - ----- ------- - - ------- -- ---- ----- ------ - --------------------- ------ -------------------- -- - ---- -- -
在这个例子中，我们有意地解构出 name 属性，但是 Object.assign() 却没有复制这个属性。这是因为解构对象会破坏原有的结构，使得 Object.assign() 失去了参考对象。
解决方法：不要在复制过程中解构对象。
-- -------------------- ---- ------- ----- ------ - --- ----- ------ - - ----- ------- ---- -- - ----- ------ - --------------------- -------- -------------------- -- - ----- ------- ---- -- -
总结
在使用 Object.assign() 的过程中，我们需要注意避免以下错误：
- 在复制过程中丢失属性。解决方法是在复制前先确保目标对象包含所有的属性。
- 合并时不应该包含原型属性。解决方法是使用 Object.getOwnPropertyNames() 方法过滤掉原型属性。
- 复制过程中解构对象。解决方法是不要在复制过程中解构对象。
合理使用 Object.assign() 方法可以提高代码的复用性和性能，减少代码中的冗余。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6480080648841e9894f892af