值得一看
双11 12
广告
广告

JS中的Object.assign有什么用?怎么用?

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

JS中的Object.assign有什么用?怎么用?

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 不复杂但容易忽略细节,特别是浅拷贝的问题,在处理嵌套对象时一定要多加小心。

温馨提示: 本文最后更新于2025-06-09 22:43:01,某些文章具有时效性,若有错误或已失效,请在下方留言或联系易赚网
文章版权声明 1 本网站名称: 创客网
2 本站永久网址:https://new.ie310.com
1 本文采用非商业性使用-相同方式共享 4.0 国际许可协议[CC BY-NC-SA]进行授权
2 本站所有内容仅供参考,分享出来是为了可以给大家提供新的思路。
3 互联网转载资源会有一些其他联系方式,请大家不要盲目相信,被骗本站概不负责!
4 本网站只做项目揭秘,无法一对一教学指导,每篇文章内都含项目全套的教程讲解,请仔细阅读。
5 本站分享的所有平台仅供展示,本站不对平台真实性负责,站长建议大家自己根据项目关键词自己选择平台。
6 因为文章发布时间和您阅读文章时间存在时间差,所以有些项目红利期可能已经过了,能不能赚钱需要自己判断。
7 本网站仅做资源分享,不做任何收益保障,创业公司上收费几百上千的项目我免费分享出来的,希望大家可以认真学习。
8 本站所有资料均来自互联网公开分享,并不代表本站立场,如不慎侵犯到您的版权利益,请联系79283999@qq.com删除。

本站资料仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
THE END
喜欢就支持一下吧
点赞14赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容