在前端开发中，拷贝对象是一个很常见的操作。然而，当我们改变一个已经拷贝过的对象时，有时候我们会发现原始对象也跟着改变了，这是因为 JavaScript 中的对象是引用类型，拷贝对象只是复制了指针而已。在 ES10 中，新增了一种方法来解决这个问题，即 Object.fromEntries()。
Object.fromEntries() 方法
Object.fromEntries() 方法是 ES10 中新增的方法，它的作用是将键值对列表转换成一个对象。这为我们创建新对象提供了一个全新的方式。我们可以使用该方法将一个对象的键值对复制到一个新的对象中，这样修改新对象的值就不会影响原始对象了。
-- -------------------- ---- ------- ----- ----------- - - ----- ------ ---- --- ------ -------- -- ----- --------- - ------------------------------------------------ -------------- - ------- -- --------- ------------------------------ -- -- ----- ---------------------------- -- -- ------
在上面的代码中，我们先声明了一个原始对象 originalObj，然后使用 Object.entries() 方法将该对象转换为一个包含所有键值对的数组，再调用 Object.fromEntries() 方法将数组转换为新对象 clonedObj，最后修改 clonedObj 的属性值不会影响 originalObj 的属性值。这就是 Object.fromEntries() 方法防止拷贝对象改变引用的秘诀。
额外的学习
对象复制的其他方法
在 ES6 之前，我们常常使用 Object.assign() 方法进行对象复制，该方法与 Object.fromEntries() 方法的最大区别就是 Object.assign() 方法会把原始对象的引用复制到新对象里，如果原始对象被修改了，新对象也会跟着一起修改。
-- -------------------- ---- ------- ----- ----------- - - ----- ------ ---- --- ------ -------- -- ----- --------- - ----------------- ------------- -------------- - ------- -- --------- ------------------------------ -- -- ----- ---------------------------- -- -- ------
在上面的代码中，我们使用了 Object.assign() 方法将原始对象复制到一个空对象中，然后修改 clonedObj 的属性值不会影响 originalObj 的属性值。
Object.entries() 方法和 for...of 循环
Object.entries() 方法返回一个数组，其中包含一个对象所有的键值对。
-- -------------------- ---- ------- ----- ----------- - - ----- ------ ---- --- ------ -------- -- ----- ------- - ---------------------------- --------------------- -- -- -- - -- - ------- ----- -- -- - ------ -- -- -- - -------- -------- - -- -
你可以使用 for...of 循环迭代 entries 数组并处理每个键值对。
for(const [key, value] of Object.entries(originalObj)) {
console.log(`${key}: ${value}`);
}
// 输出
// name: Tom
// age: 18
// hobby: coding结论
ES10 引入的 Object.fromEntries() 方法提供了一种简单有效的方式来防止拷贝对象改变引用。使用该方法可以快速地创建一个新的对象并保证其没有任何暗示的引用关系。此外，使用 Object.entries() 方法和 for...of 循环可以快速简单地处理任意的对象。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f75d14c5c563ced59804af