对象合并的五种方法

Posted 2022-04-26 老张在线敲代码

Object.assign（）

同名属性会被覆盖
Object.assign种第一个值是目标对象，第二个值是源对象

const obj1=a:"1",b:"2"
const obj2=b:"3",c:"4"
const result = Object.assign(obj1,obj2)
console.log(result)
//a:1 b:3 c:4     obj1中b的值被后面传入的obj2的值给覆盖掉了

扩展运算符

同名属性会被覆盖

使用…扩展运算符合并对象obj1对象在前和在后最后打印的结果是不同的

const obj1=a:"1",b:"2";
const obj2=b:"3",c:"4";
const result = ...obj1,...obj2;
console.log(result)
//a:1 b:3 c:4     obj1中b的值被后面传入的obj2的值给覆盖掉了

lodash.assign

先将lodash工具库引入

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js">
</script>

在项目中我们通常使用_来代替lodash

const obj1=a:"1",b:"2";
const obj2=b:"3",c:"4";
const result = _.assign(obj1,obj2);
console.log(result)
//a:1 b:3 c:4    

lodash.merge

先将lodash工具库引入

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js">
</script>

在项目中我们通常使用_来代替lodash

const obj1=a:"1",b:"2";
const obj2=b:"3",c:"4";
const result = _.merge(obj1,obj2);
console.log(result)
//a:1 b:3 c:4    

lodash.assign和lodash.merge的区别

assign遇到同名的属性会直接覆盖
assign 不会处理原型链上的属性，也不会合并相同的属性，而是用后面的属性值覆盖前面的属性值

assign(,  a: 1 ,  b: 2 );
//  a: 1, b: 2 

// 后面的  a: 2  把前面的  a: 1  覆盖了
assign(,  a: 1 ,  b: 2 ,  a: 2 );
//  a: 2, b: 2 

// 观察下面两个例子，若是属性值为 object，后面的值会覆盖前面的值
assign(
  ,
   a: 1 ,
   b:  c: 2, d: 3  
)
//  a: 1, b:  c: 2, d: 3  

assign(
  ,
   a: 1 ,
   b:  c: 2, d: 3  ,
   b:  e: 4  
)
//  a: 1, b:  e: 4  

// `assign` 函数会忽略原型链上的属性。
function Foo()  this.c = 3; 
Foo.prototype.d = 4;
assign( a: 1 , new Foo());
//  a: 1, c: 3 

// `assign` 会修改原来的对象
var test =  a: 1 ;
assign(test,  b: 2 ); //  a: 1, b: 2 
console.log(test);      //  a: 1, b: 2 

merge遇到相同属性名的时候，若是属性值是纯对象或集合的时候，会合并属性值

assign(
  ,
   a: 1 ,
   b:  c: 2, d: 3 ,
   b:  e: 4  
)
//  a: 1, b:  e: 4  
merge(
  ,
   a: 1 ,
   b:  c: 2, d: 3 ,
   b:  e: 4  
)
//  a: 1, b:  c: 2, d: 3, e: 4  

// 合并集合
var users = 
  'data': [ 'user': 'barney' ,  'user': 'fred' ]
;
var ages = 
  'data': [ 'age': 36 ,  'age': 40 ]
;
merge(, users, ages)
//  data: [  user: 'barney', age: 36 ,  user: 'fred', age: 40  ] 

// merge 函数会修改原来的对象！
merge(users, ages)
console.log(users) //  data: [  user: 'barney', age: 36 ,  user: 'fred', age: 40  ]

阅读世界，共赴山海 423全民读书节，邀你共读