在前端开发中，我们经常需要将多个对象合并成一个对象，以便进行数据处理或展示。在 ES8/ES2017 中，我们可以使用 Object.assign 方法来实现对象的合并。本文将详细介绍 Object.assign 的用法及其在实际开发中的应用。
Object.assign 的用法
Object.assign 是 ES6 中引入的一个方法，用于将一个或多个源对象的属性复制到目标对象中。它的语法如下：
Object.assign(target, ...sources)
其中，target 是目标对象，sources 是一个或多个源对象。Object.assign 方法将 sources 中的属性复制到 target 中，如果有重复的属性，则后面的属性值会覆盖前面的属性值。
需要注意的是，Object.assign 方法是浅拷贝，即只复制对象的一层属性。如果源对象的属性值是一个对象或数组，那么它们的引用会被复制到目标对象中，而不是它们的值。
Object.assign 的应用
合并对象
最常见的用法就是将多个对象合并成一个对象。例如，我们有一个用户信息对象和一个用户设置对象：
// javascriptcn.com 代码示例
const userInfo = {
name: '张三',
age: 18,
gender: '男',
};
const userSettings = {
language: 'zh-CN',
theme: 'light',
};我们可以使用 Object.assign 方法将它们合并成一个对象：
const user = Object.assign({}, userInfo, userSettings);这里我们将一个空对象作为目标对象，然后将 userInfo 和 userSettings 作为源对象传入 Object.assign 方法。最终得到的 user 对象如下：
{
name: '张三',
age: 18,
gender: '男',
language: 'zh-CN',
theme: 'light',
}更新对象
我们可以使用 Object.assign 方法更新一个对象的属性。例如，我们要将用户的年龄更新为 20 岁：
Object.assign(userInfo, { age: 20 });这里我们将 userInfo 作为目标对象，然后将一个包含 age 属性的对象作为源对象传入 Object.assign 方法。最终得到的 userInfo 对象如下：
{
name: '张三',
age: 20,
gender: '男',
}合并数组
虽然 Object.assign 方法只能合并对象，但我们可以通过数组的 map 方法来实现合并数组的效果。例如，我们有两个数组：
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6];
我们可以使用 map 方法将它们合并成一个数组：
const arr3 = [...arr1, ...arr2];
这里我们使用了扩展运算符将 arr1 和 arr2 展开成一个新数组，并将它们赋值给 arr3。最终得到的 arr3 数组如下：
[1, 2, 3, 4, 5, 6]
总结
Object.assign 方法是一个非常实用的方法，它可以帮助我们快速合并对象和更新对象属性。需要注意的是，它只能复制对象的一层属性，如果源对象的属性值是一个对象或数组，那么它们的引用会被复制到目标对象中，而不是它们的值。在实际开发中，我们应该合理运用 Object.assign 方法，避免出现不必要的错误。
示例代码
// javascriptcn.com 代码示例
// 合并对象
const userInfo = {
name: '张三',
age: 18,
gender: '男',
};
const userSettings = {
language: 'zh-CN',
theme: 'light',
};
const user = Object.assign({}, userInfo, userSettings);
console.log(user);
// 输出：{ name: '张三', age: 18, gender: '男', language: 'zh-CN', theme: 'light' }
// 更新对象
Object.assign(userInfo, { age: 20 });
console.log(userInfo);
// 输出：{ name: '张三', age: 20, gender: '男' }
// 合并数组
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3);
// 输出：[1, 2, 3, 4, 5, 6]来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65614b88d2f5e1655db5dfc4