JS小技巧：手把手教你搞定Object.assign的正确用法

想玩转 JavaScript 对象操作？`Object.assign()` 绝对是你的得力助手！本文以“JS小技巧：Object.assign到底怎么用？一文教你掌握它的正确打开方式”为题，深入剖析 `Object.assign()` 的核心用法与注意事项。它能将多个源对象的可枚举属性合并到目标对象，实现对象属性的快速复制与合并。但要注意，`Object.assign()` 执行的是浅拷贝，对于嵌套对象，仅复制引用而非深度复制。文章通过实例讲解了其在 React 状态更新、配置项合并等场景中的应用，并对比了与展开运算符 `...` 的异同。掌握 `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学习网公众号！