#yyds干货盘点#Object.assign的使用

Posted 2022-02-11 歆冉

在查看某框架的源码时，发现有大量使用了Object.assign方法，参考看mdn现出浅的研究一下,如下:

1.语法

/**
* Object.assign(target, ...sources)
* 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象
* target: 目标对象
* sources: 源对象
* 返回值: 目标对象
* 描述: 如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性
*/

2.代码

const target = 
 a: 1,
 b: 2
;
const source = 
 b: 4,  // 注意: 此处有一个重复的key, 重复的key会覆盖被覆盖
 c: 5
;

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object  a: 1, b: 4, c: 5 

console.log(returnedTarget);
// expected output: Object  a: 1, b: 4, c: 5 

注意: 如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖

3.复制对象

const obj =  a: 1 ;
const copy = Object.assign(, obj);
console.log(copy); //  a: 1 

注意: 针对深拷贝，需要使用其他办法，因为 Object.assign()拷贝的是（可枚举）属性值, 假如源值是一个对象的引用，它仅仅会复制其引用值

4.合并一个对象

const o1 =  a: 1 ;
const o2 =  b: 2 ;
const o3 =  c: 3 ;

const obj = Object.assign(o1, o2, o3);
console.log(obj); //  a: 1, b: 2, c: 3 
console.log(o1);  //  a: 1, b: 2, c: 3 , 注意目标对象自身也会改变。
console.log(obj === o1); // true 说明是同一个对象

注意: obj 和 o1 是同一个对象。target: 目标对象 ，返回值: 目标对象

5.合并具有相同属性的对象

const o1 =  a: 1, b: 1, c: 1 ;
const o2 =  b: 2, c: 2 ;
const o3 =  c: 3 ;

const obj = Object.assign(, o1, o2, o3);
console.log(obj); //  a: 1, b: 2, c: 3  会覆盖掉相同的属性值

6.总结

• 拷贝对象时是浅拷贝
• 第一个参数对象和返回值是同一个对象
• 后面的key值会覆盖掉前面的key值