object assigned a value but（Object.assign详解）

目录

一            、Object.assign是什么？

二  
 
  
 
  
 
  
 
  
 
  
 
  、用法：

三












、详细讲解

1.目标对象和源对象没有同名属性

2.目标对象和源对象有同名属性

3.有多个源对象

4
  
  
  
  
  
  
、原始类型会被包装为对象

5  
  
  
  
  
  
 、对象的拷贝

6
 


 


 


 


 


 


 、对象的深拷贝

7
 
 
 
 
 
 
、对象的深拷贝

总结

一   
   
   
   
   
   
 、Object.assign是什么？

object.assign()主要用于对象合并
  
  
  
  
  
  
 ，将源对象中的属性复制到目标对象中 
  
  
  
  
  
 ，他将返回目标对象            。

二
 

 

 

 

 

 

 、用法：

Object.assign(target, ...sources)

参数：target--->目标对象

           source--->源对象

返回值：target 


 


 


 


 


 


 
，目标对象

三

 

 

 

 

 

 
、详细讲解

1.目标对象和源对象没有同名属性

var target = {name:带你飞} var source = {age:18} var result = Object.assign(target,source) console.log(result,target===result); // {name: 带你飞, age: 18} true

如果只是想将两个或多个对象的属性合并到一起
 
 
 
 
 
 
，不改变原有对象的属性  
   
   
   
   
   
  ，可以用一个空的对象作为target对象  
 
  
 
  
 
  
 
  
 
  
 
  。像下面这样：

var result=Object.assign({},target,source);

2.目标对象和源对象有同名属性

var target = {name:带你飞,age:16} var source = {age:18} var result = Object.assign(target,source) console.log(result,target===result); // {name: 带你飞, age: 18} true

可以看到如果有同名属性的话 

 

 

 

 

 

 
，后面的属性值会覆盖前面的属性值












。

3.有多个源对象

var target = {name:带你飞,age:16} var source1 = {age:18} var source2 = {age:20,hobby:打游戏} var result = Object.assign(target,source1,source2) console.log(result,target===result); // {name: 带你飞, age: 20, hobby: 打游戏} true

如果有多个源对象

 

 

 

 

 

 
，没有同名的属性会直接复制到目标对象上             ，如果有同名属性的话 
 

 
 

 
 

 
 

 
 

 
 

 
，后面的属性值会覆盖前面的属性值
  
  
  
  
  
  
。

4             、原始类型会被包装为对象

var source1 = "abc"; var source2 = true; var source3 = 10; var result = Object.assign({}, source1, null, source2, undefined, source3); // 原始类型会被包装












，null 和 undefined 会被忽略  
  
  
  
  
  
 。 // 注意                   ，只有字符串的包装对象才可能有自身可枚举属性
 


 


 


 


 


 


 。 console.log(result); // {0: a, 1: b, 2: c}

5
 
 

 
 

 
 

 
 

 
 

 
 

 、对象的拷贝

var object1 = { a: 1, b: 2, c: 3 }; var object2 = Object.assign({c: 4, d: 5}, object1); console.log(object2.c, object2.d); // 3 5 console.log(object1) // { a: 1, b: 2, c: 3 } console.log(object2) // { c: 3, d: 5, a: 1, b: 2 } Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象
 
 
 
 
 
 
。

6












、对象的深拷贝

深拷贝：深拷贝不会拷贝引用类型的引用 
 
 
 
 
 
 
 
 
 
 
 
 
，而是将引用类型的值全部拷贝一份


















，形成一个新的引用类型             ，这样就不会发生引用错乱的问题 
 
  
 
  
 
  
 
  
 
  
 
  
，使得我们可以多次使用同样的数据











，而不用担心数据之间会起冲突   
   
   
   
   
   
 。

let object1 = { a: 1, b: 2 }; let object2 = Object.assign({}, obj1, { b: 20 }); console.log(object1); // { a: 1, b: 2 } console.log(object2); // { a: 1, b: 20 }

7                   、对象的浅拷贝

浅拷贝：浅拷贝只是复制了对象的引用地址
  
  
  
  
  
  
 ，两个对象指向同一个内存地址 
  
  
  
  
  
 ，所以修改其中任意的值 


 


 


 


 


 


 
，另一个值都会随之变化
 
 
 
 
 
 
，这就是浅拷贝

var object1 = { a: 1, b: { c: 2, d: 3 } }; var object2 = Object.assign({}, object1); object2.a = 10; object2.b.c = 20; console.log(object1); // { a: 1, b: { c: 20, d: 3 } } console.log(object2) //{ a: 10, b: { c: 20, d: 3} }

总结：

      object.assign()主要用于对象合并  
   
   
   
   
   
  ，将源对象中的属性复制到目标对象中 

 

 

 

 

 

 
，他将返回目标对象
 

 

 

 

 

 

 。如果有同名属性的话

 

 

 

 

 

 
，后面的属性值会覆盖前面的属性值             ，如果有多个源对象 
 

 
 

 
 

 
 

 
 

 
 

 
，没有同名的属性会直接复制到目标对象上












，还可以进行对象的深浅拷贝                   ，当对象中只有一级属性 
 
 
 
 
 
 
 
 
 
 
 
 
，没有二级属性的时候


















，此方法为深拷贝             ，但是对象中有对象的时候 
 
  
 
  
 
  
 
  
 
  
 
  
，此方法











，在二级属性以后就是浅拷贝

 

 

 

 

 

 
。

             。

以上内容纯属个人理解
  
  
  
  
  
  
 ，如果有朋友发现不对的欢迎随时指正！