Detailed explanation of Object.assign

Table of contents

1. What is Object.assign?

2. Usage:

3. Detailed explanation

1. The target object and the source object do not have the same name attribute

2. The target object and the source object have properties with the same name

3. There are multiple source objects

4. Primitive types will be packaged as objects

5. Copy of the object

6. Deep copy of object

7. Deep copy of object

Summarize

---

1. What is Object.assign?

object.assign() is mainly used for object merging, copying the attributes in the source object to the target object, and it will return the target object.

2. Usage:

Object.assign(target, ...sources)

Parameters: target--->target object

           source--->source object

Return value: target, target object

3. Detailed explanation

1. The target object and the source object do not have the same name attribute

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

If you just want to combine the attributes of two or more objects without changing the attributes of the original objects, you can use an empty object as the target object. Like this:

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

2. The target object and the source object have properties with the same name

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

It can be seen that if there is an attribute with the same name, the later attribute value will override the previous attribute value.

3. There are multiple source objects

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

If there are multiple source objects, no attribute with the same name will be directly copied to the target object. If there is an attribute with the same name, the later attribute value will overwrite the previous attribute value.

4. Primitive types will be packaged as objects

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. Copy of the object

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 }

The Object.assign method only copies the enumerable properties of the source object itself to the target object.

6. Deep copy of object

Deep copy: Deep copy does not copy the reference of the reference type, but copies all the values ​​​​of the reference type to form a new reference type, so that the problem of reference confusion will not occur, so that we can use the same one multiple times data without worrying about data conflicts.

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. Shallow copy of object

Shallow copy: Shallow copy just copies the reference address of the object, and the two objects point to the same memory address, so if any value is modified, the other value will change accordingly. This is shallow copy

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} }

Summarize:

      object.assign() is mainly used for object merging, copying the attributes in the source object to the target object, and it will return the target object. If there is an attribute with the same name, the later attribute value will overwrite the previous attribute value. If there are multiple source objects, no attribute with the same name will be directly copied to the target object, and the deep and shallow copy of the object can also be performed. When there is only one level in the object Attribute, when there is no second-level attribute, this method is a deep copy, but when there is an object in the object, this method is a shallow copy after the second-level attribute.
.

The above content is purely personal understanding, if anyone finds something wrong, please feel free to correct me!