在 JavaScript 开发中，经常需要将两个或多个对象合并为一个对象。这种需求在前端开发中特别常见，比如说在处理表单数据时需要将输入文本框中的值和一些默认值合并起来，以便进行进一步的处理。ES8 引入了 Object.assign() 方法，提供了一种简单高效的方式来合并两个对象。
Object.assign() 方法介绍
Object.assign() 方法可以用来将所有可枚举属性的值从一个或多个源对象复制到目标对象中，并返回目标对象。它的基本语法如下：
Object.assign(target, ...sources)
参数说明：
target：必需。目标对象，即需要合并到的对象。sources：必需。源对象，即需要从中合并属性的对象。该参数可以是一个或多个对象。
Object.assign() 方法会遍历源对象（sources）的所有可枚举属性，然后将这些属性的值复制到目标对象（target）的同名属性中。如果目标对象中已存在相同的属性，则该属性的值会被源对象中的值所覆盖。
使用 Object.assign() 方法合并对象
下面是一个简单的示例，演示如何使用 Object.assign() 方法将两个对象合并起来：
const obj1 = { a: 1, b: 2 }
const obj2 = { b: 3, c: 4 }
const obj3 = Object.assign({}, obj1, obj2)
console.log(obj3)
// Output: { a: 1, b: 3, c: 4 }在这个示例中，我们首先定义了两个对象 obj1 和 obj2，分别包含属性 a、b、c 的值，其中 obj1 中包含属性 a 和 b 的值，obj2 中包含属性 b 和 c 的值。
然后，我们使用 Object.assign() 方法将这两个对象合并成了一个新的对象 obj3。在这个过程中，我们还定义了一个空对象作为目标对象。
最终得到的新对象 obj3 中包含了所有 obj1 和 obj2 中的属性，其中对象 obj2 中的 b 的值覆盖了 obj1 中的 b 的值。
使用 Object.assign() 方法处理表单数据
在前端开发中，Object.assign() 方法经常用来处理表单数据。以下是一个示例代码：
-- -------------------- ---- -------
------
-----
------ ---------------------------
------ ----------- ------------- ----------------
------
-----
------ --------------------------
------ --------------- ------------- ----------------
------
-------我们可以使用以下 JavaScript 代码来获取表单数据，并将其与默认值合并为一个对象：
const form = document.querySelector('form')
const formData = new FormData(form)
const defaultValues = { username: '', password: '' }
const data = Object.assign(defaultValues, Object.fromEntries(formData.entries()))
console.log(data)在这个示例中，我们首先获取了表单元素并创建了一个 FormData 对象。然后，我们定义了一个名为 defaultValues 的对象，其中包含了待处理数据的默认值对象。接下来，我们使用 Object.assign() 方法将 defaultValues 和 FormData 中的数据合并为一个新的对象 data。同时，我们使用 Object.fromEntries() 方法将 FormData 中的键-值对转换为对象。
总结
Object.assign() 是一个非常有用的方法，可以用来合并两个或多个对象。在前端开发中，我们经常需要处理表单数据，使用 Object.assign() 方法可以轻松地将表单数据和默认值合并为一个对象。在使用 Object.assign() 方法时，需要注意源对象中的同名属性会覆盖目标对象中的属性。理解 Object.assign() 方法的工作原理，并使用它来处理实际的开发问题，可以提高代码的效率和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64acaa8a48841e9894896fc1