浅谈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"}}

vue.js 前端前端前端前端

VUE的两个或多个对象拷贝