JS技巧|Object.assign的用法+超实用场景分享

**JS技巧分享：Object.assign用法及实用场景** `Object.assign`是JavaScript中用于对象属性复制的实用方法，主要功能是将一个或多个源对象的可枚举属性复制到目标对象，并返回修改后的目标对象。其核心用法包括合并对象（`Object.assign(target, ...sources)`，后同名属性覆盖前属性）、浅拷贝（仅复制引用地址，修改副本会影响原对象）以及在React状态更新和配置项合并等场景中的应用，确保原有对象部分更新而非完全替换。展开运算符（`...`）是其替代方案，行为一致但写法不同。使用时需注意浅拷贝可能带来的副作用。本文将深入探讨`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学习网公众号！