JS进阶教程！手把手教你搞懂Object.assign对象合并技巧

想进阶JS？那就必须搞懂`Object.assign`！本文手把手教你掌握对象合并的实用技巧。`Object.assign`是JavaScript中强大的对象操作方法，主要用于将一个或多个源对象的可枚举属性复制到目标对象，实现对象合并与浅拷贝。其基本用法简单明了：`Object.assign(target, ...sources)`，但需注意属性覆盖问题。本文深入剖析`Object.assign`的浅拷贝特性，并通过React状态更新与配置项合并等实际应用场景，展示其在前端开发中的重要作用。同时，对比展开运算符（...）的替代方案，帮助你更好地理解和运用`Object.assign`，避免潜在的副作用，提升代码质量。

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学习网公众号！