JS实战教学！手把手教你用Object.assign轻松合并对象

**JS技巧分享：手把手教你用Object.assign合并对象** 还在为JavaScript中合并对象而烦恼吗？本文将深入解析`Object.assign`这一实用方法，教你轻松实现对象属性的复制与合并。`Object.assign`主要用于将一个或多个源对象的可枚举属性复制到目标对象，常用于对象合并、浅拷贝等场景。文章将详细讲解`Object.assign`的基本用法，包括如何合并多个对象，以及属性覆盖的规则。同时，重点提示其浅拷贝特性，并提供React状态更新、配置项合并等实际应用场景。此外，文章还将介绍ES6展开运算符`...`这一替代方案。掌握`Object.assign`，让你的JavaScript代码更简洁高效！

Object.assign 是 JavaScript 中用于复制对象属性的方法，其核心作用是将一个或多个源对象的可枚举属性复制到目标对象中并返回。1. 基本用法是合并对象，语法为 Object.assign(target, ...sources)，若属性名重复，后面的源对象属性会覆盖前面的；2. 它执行的是浅拷贝，并不复制嵌套对象的内部结构，仅复制引用地址，因此修改副本会影响原对象；3. 常见应用场景包括 React 状态更新与配置项合并，确保原有对象部分更新而非完全替换；4. 展开运算符（...）是其替代方案之一，行为一致但写法不同。使用时需特别注意浅拷贝带来的潜在副作用。

Object.assign 在 JavaScript 中是一个非常实用的对象操作方法，主要用来复制一个或多个源对象的所有可枚举属性到目标对象中，并返回修改后的目标对象。它常用于合并对象、浅拷贝等场景。

一、基本用法：合并对象最常见

Object.assign 的基本语法是：

Object.assign(target, ...sources)

• target 是目标对象。
• sources 是一个或多个源对象。

使用时，所有源对象的可枚举属性会被复制到目标对象中。如果多个源对象有相同属性名，后面的会覆盖前面的。

举个例子：

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

const result = Object.assign({}, obj1, obj2, obj3);
console.log(result); // { a: 1, b: 2, c: 3 }

这里我们用了一个空对象 {} 作为 target，这样就不会修改原始对象。

二、浅拷贝不是深拷贝，这点要特别注意

很多人误以为 Object.assign 能做深拷贝，其实它是浅拷贝。

什么意思呢？比如对象里嵌套了另一个对象：

const original = {
  name: 'Tom',
  info: {
    age: 25,
  },
};

const copy = Object.assign({}, original);
copy.info.age = 30;

console.log(original.info.age); // 30

可以看到，虽然我们只改了 copy 的 info.age，original 里的值也被影响了。因为 info 属性是个引用类型，Object.assign 只复制了这个引用地址，而不是真正把里面的对象也复制一份。

所以：

• 如果只是拷贝一层结构没问题；
• 如果有多层嵌套，就需要考虑其他方式（比如递归拷贝或者 JSON.parse(JSON.stringify())）。

三、应用场景：常用在配置合并、状态更新等地方

Object.assign 在实际开发中很常见，尤其是在 React 状态更新、配置项合并这些场景。

比如在 React 中更新 state：

this.setState(prevState => {
  return {
    user: Object.assign({}, prevState.user, { name: 'Jerry' }),
  };
});

这样就能保证原来的 user 对象不会被完全替换，而是只更新 name 字段。

再比如设置默认配置：

function init(options) {
  const defaultConfig = {
    timeout: 1000,
    retry: 3,
  };
  const config = Object.assign({}, defaultConfig, options);
  console.log(config);
}

init({ retry: 5 }); // { timeout: 1000, retry: 5 }

四、替代方案：展开运算符也能实现类似功能

ES6 中的展开运算符（...）也可以合并对象，效果和 Object.assign 类似：

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const merged = { ...obj1, ...obj2 };

不过要注意，它们一样都是浅拷贝，行为一致，区别主要是写法不同。

基本上就这些。Object.assign 不复杂但容易忽略细节，特别是浅拷贝的问题，在处理嵌套对象时一定要多加小心。

今天关于《JS实战教学！手把手教你用Object.assign轻松合并对象》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！