js Object.assign 浅拷贝场景实现

最新推荐文章于 2025-05-14 07:47:32 发布

MockingBHM

最新推荐文章于 2025-05-14 07:47:32 发布

阅读量215

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/MockingBHM/article/details/125004472

本文通过一个实际项目案例解析了使用Object.assign方法时遇到的问题，揭示了浅拷贝特性导致的数据引用问题，并提供了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前在面试的时候，总会有面试官会问一些浅拷贝和深拷贝的问题，以及会提到Object.assign是浅拷贝还是深拷贝，答案当然很明确：浅拷贝，那么深浅拷贝对于这个方法应用场景有什么影响呢？

今天在项目中碰到个使用Object.assign的场景，我很随意的把两个需要整合的对象写进了两个参数中

alreadyAuditListQuery: {
					pageNumber: 1,
					pageSize: 20,
					approveStatus: true
},

 let query = Object.assign(this.alreadyAuditListQuery,{
		dateRange: this.dateRange
    })

dataRange是个对象里面有begin和end

看得出来我在做分页，第一次分页的query很正常，但是当我把dateRange变为null后打印出来 begin和end并没有被覆盖掉，按道理我的dateRange为null，是不会存在begin和end的呀

、

而当我把Object.assign里的参数位置对调之后就没有begin和end两个属性了也就是dateRange为null生效了，达到了我的效果。

总结：出现这个问题的原因在于Object.assign(target,source)方法是个浅拷贝，也就是把source合并到target上去，指针指向并没有变，那我第二次再调用这个方法的时候第一个参数由于是个全局变量，已经被改变了，那么所以我把两个参数对调，把第一个参数写作临时变量，那每次调用都有独立的内存，就解决问题了