es6 合并多个对象并且去重的2种实现方法

方法一

Es6的 Object.assign() 方法

Object.assign()方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

举例：

let obj1 = {a: 1}
let obj2 = {b: 2}
let obj3 = {b: 3, c:4}
let obj = Object.assign(obj1, obj2, obj3)
console.log(obj, obj1, obj2, obj3)

输出：{a: 1, b: 3, c: 4} {a: 1, b: 3, c: 4} {b: 2} {b: 3, c: 4}

注意

1、Object.assign()方法的第一个参数是目标对象，后面的参数都是源对象。

2、此处obj2里的属性b被后面的obj3里的属性b给覆盖了。

方法二

方法二是方法一的简写形式，代码更加的简洁，效果是一样的。

let obj1 = {a: 1}
let obj2 = {b: 2}
let obj3 = {b: 3, c:4}
let objTwo = {...obj1,...obj2,...obj3}
console.log(objTwo, obj1, obj2, obj3)

执行结果：{a: 1, b: 3, c: 4} {a: 1, b: 3, c: 4} {b: 2} {b: 3, c: 4}

{...obj1,...obj2,...obj3} ...链接的形式更加简单粗暴！

Object.assign 知识补充

更多时候我们在合并对象时是 Object.assign({}, obj1, obj2, obj3) 。目标对象设置为一个空对象，这样就可以得到一个全新的对象，不影响源对象。

1、如果传入的参数不是对象的话，会把数据类型转化为对象，再进行合并。

例子

typeof Object.assign(2) // "object"

由于undefined和null无法转成对象，所以如果它们作为参数，就会报错。

Object.assign(undefined) // 报错
Object.assign(null) // 报错

如果非对象参数出现在源对象的位置（即非首参数），那么处理规则有所不同。首先，这些参数都会转成对象，如果无法转成对象，就会跳过。这意味着，如果undefined和null不在首参数，就不会报错。

let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true

其他类型的值（即数值、字符串和布尔值）不在首参数，也不会报错。但是，除了字符串会以数组形式，拷贝入目标对象，其他值都不会产生效果。

let param1 = 'abc';
let param2 = true;
let param3 = 10;
let obj = Object.assign({}, param1, param2, param3);
console.log(obj); 
// {0: "a", 1: "b", 2: "c"}

执行结果为：{0: "a", 1: "b", 2: "c"}

上面代码中，param1、param2、param3分别是字符串、布尔值和数值，结果只有字符串合入目标对象（以字符数组的形式），数值和布尔值都会被忽略。这是因为只有字符串的包装对象，会产生可枚举属性。
 

2、如果只有一个参数，Object.assign()会直接返回该参数。

const obj = {a: 1};
Object.assign(obj) === obj // true