在前端开发中，我们经常需要复制一个对象，以便对其进行修改而不影响原始对象。但是，JavaScript 并不提供直接的对象复制方法。在这种情况下，我们可以使用 ES8 标准中的 Object.getOwnPropertyNames() 方法来实现对象的快速复制。
什么是 Object.getOwnPropertyNames() 方法？
Object.getOwnPropertyNames() 方法是 ES5 引入的一个用于获取对象自身的所有属性名（包括不可枚举属性）的静态方法。该方法返回的是一个由属性名字符串组成的数组。
在 ES6 中，新增了 Object.getOwnPropertySymbols() 方法，用于获取对象自身的所有 Symbol 类型的属性。
当我们需要浅拷贝一个对象时，可以利用 Object.getOwnPropertyNames() 来获取该对象的所有属性，并将这些属性分别赋值给新对象，从而完成对象的复制。
利用 Object.getOwnPropertyNames() 实现对象复制
下面的代码演示了如何利用 Object.getOwnPropertyNames() 实现对象的浅复制。
-- -------------------- ---- ------- ----- ------ - - ----- -------- ---- --- ----- ---------- -- ----- ----------- - --- ------------------------------------------------- -- - ----------------- - ------------- --- -------------------------
上述代码中，我们首先创建了一个名为 person 的对象，包含了三个属性：name、age 和 city。接着，我们创建了一个名为 clonePerson 的空对象，并使用 forEach() 方法对 person 对象的每个属性进行了复制，最后将复制后的对象打印输出。
深度复制对象
上述示例代码演示了如何使用 Object.getOwnPropertyNames() 实现浅复制，即仅复制对象的第一层属性。如果对象的属性值是一个对象，则浅复制只会复制其引用，而不是真正的复制该对象。这也就是所谓的“浅复制”。
有时我们需要深度复制一个对象，即在复制对象时，将对象所有嵌套的属性也进行复制。我们可以借助 JavaScript 的递归机制来实现深度复制。
下面的代码演示了如何利用递归和 Object.getOwnPropertyNames() 实现对象的深度复制：
-- -------------------- ---- -------
-------- ------------- -
-- ------- --- --- -------- -- --- --- ----- -
------ ----
-
----- -------- - ------------------ - -- - ---
---------------------------------------------- -- -
-- ------- --------- --- --------- -
-------------- - --------------------
- ---- -
-------------- - ----------
-
---
------ ---------
-
----- ------ - -
----- --------
---- ---
----- -
----- -----------
----- -----
-
--
----- ----------- - -----------------
-------------------------上述代码中，我们创建了一个名为 deepCopy() 的函数，用于深度复制一个对象。在该函数中，如果对象不是原始类型，则使用递归来复制该对象，如果是原始类型，则直接将其赋值给一个新的对象，从而完成深度复制。
我们将上述深度复制代码应用于 person 对象，发现该对象包含一个 name 和 age 属性，以及一个 city 对象。city 对象包含 name 和 code 两个属性。运行代码后，我们发现 clonePerson 对象完全复制了 person 对象，包括嵌套的 city 对象。
总结
使用 Object.getOwnPropertyNames() 方法可以很方便地复制一个对象，这种方法适用于浅拷贝一个对象。如果需要深度复制一个对象，则需要借助递归来实现。掌握这些方法可以帮助我们高效地实现对象的复制，提高代码效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c60fac4908f32798b23859