JS中Object.assign用法详解

想知道JavaScript中`Object.assign`的妙用吗？本文深入解析`Object.assign`，这个强大的方法主要用于合并对象，将一个或多个源对象的可枚举属性复制到目标对象，实现对象的浅拷贝。本文将详细介绍`Object.assign`的基本语法`Object.assign(target, ...sources)`，揭示其在合并对象时属性覆盖的规则，并着重强调其浅拷贝的特性，以及由此可能带来的副作用。同时，文章还列举了`Object.assign`在React状态更新和配置项合并等实际开发中的常见应用场景。此外，我们还将探讨ES6展开运算符`...`作为替代方案的用法。掌握`Object.assign`，提升你的JS对象操作技能！

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学习网公众号了解相关技术文章。