Object.assign merged objects

Object.assign(target, ...sources)

Parameters: target--->target object source--->source object

Return value: target, target object


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

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

//如果只是想将两个或多个对象的属性合并到一起,不改变原有对象的属性,可以用一个空的对象作为target对象。像这样:
var result=Object.assign({},target,source);
var result=Object.assign({},target,source);

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

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

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

3. There are multiple source objects

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

//如果有多个源对象,没有同名的属性会直接复制到目标对象上,如果有同名属性的话,后面的属性值会覆盖前面的属性值。

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 objects

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. Deep copy of object Deep copy
: Deep copy will not copy the reference of the reference type, but will copy all the values ​​of the reference type to form a new reference type, so that the problem of reference confusion will not occur, which makes us You can use the same data multiple times without worrying about data conflicts.

let object1 = {a: 1,b: 2};
 
let object2 = Object.assign({}, object1, {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 only copies the reference address of the object. The two objects point to the same memory address, so if any value is modified, the other value will change accordingly. This is a 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} }


Summary:
      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 are attributes with the same name, the subsequent attribute values ​​will overwrite the previous attribute values. If there are multiple source objects, attributes without the same name will be copied directly to the target object. Deep and shallow copies of the object can also be performed. When there is only one level in the object Attributes, when there are no secondary attributes, this method is a deep copy, but when there are objects in the object, this method is a shallow copy after the secondary attributes.

Guess you like

Origin blog.csdn.net/xiaoxiong_jiaxin/article/details/131858049