VUE的两个或多个对象拷贝

不秃头的小码农^-^

已于 2022-08-24 16:46:16 修改

阅读量2.1k

点赞数

文章标签： vue.js 前端

于 2022-08-24 16:44:37 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50197393/article/details/126503990

版权

本文介绍了JavaScript中对象拷贝的两种常见方法：Object.assign实现的浅拷贝和deepmerge实现的深拷贝。浅拷贝仅合并对象的第一层属性，而深拷贝则能处理多层嵌套的对象结构。通过示例展示了当对象包含多层属性时，Object.assign无法保留原有结构，而deepmerge则能完整复制。对于需要完整复制复杂对象的情况，deepmerge是更好的选择。

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

浅谈object.assign与deepmerge

object.assign（浅拷贝）

用于对象的合并，将源对象的属性，复制到目标对象中

	  let target = {a:1}
      const target1 = {a:2,b:2,map:{file1:"test1",file2:"test2"}};
      const target2 = {c:3,map:{file1:"test1"}};
      Object.assign(target,target1,target2)
      //target={"a":2,"b":2,"map":{"file1":"test1"},"c":3}

Object.assign方法的第一个参数是目标对象，后面的参数都是源对象；

注：

Object.assign只能做到对象的浅合并，即第一层属性的合并；
遇到同名属性，Object.assign的处理方法是替换：如果目标对象与源对象有同名属性，则目标对象中该属性会被覆盖，即后面（右边）的属性会覆盖前面（左边）的属性；

const target1 = {a:1,map:{file1:"test1",file2:"test2"}};
const target2 = {b:2,map:{file3:"test3"}};
Object.assign(target1,target2)

得到的结果是：
{“a”:2,“b”:2,“map”:{“file3”:“test3”}}
而不是：
{“a”:2,“b”:2,“map”:{“file1”:“test1”,“file2”:“test2”,“file3”:“test3”}}

当对象是多层结构的时候，以上拷贝方式往往达不到我们所想要的效果，此时就需要深层拷贝，可以采取循环方式，进行多次多次浅层拷贝，但是这样会比较繁琐，在这比较推荐deepmerge（深层拷贝）

deepmerge（深层拷贝）

1.安装

npm install deepmerge

2.使用

import merge from 'deepmerge'

const obj = merge(obj1, obj2)

3.示例

const target1 = {a:1,map:{file1:"test1",file2:"test2"}};
const target2 = {b:2,map:{file3:"test3"}};
const obj = merge(target1 , target2 )

//结果：{"a":2,"b":2,"map":{"file1":"test1","file2":"test2","file3":"test3"}}