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

来源:网络 文章列表 2019-03-15 8
本文介绍了2种es6对象属性合并且去除重复属性的方法。

方法一

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"

由于undefinednull无法转成对象,所以如果它们作为参数,就会报错。

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

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

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

 

 

 


 

 

 

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论