Syntax: Object.assign (target, ... sources) target: audiences, sources: the source object
is used to enumerate all the attribute values are copied from one or more source object to the target object. It will return to the target object.
1 const target = { a: 1, b: 2 }; 2 const source = { b: 4, c: 5 }; 3 const returnedTarget = Object.assign(target, source); 4 5 console.log(target); // Object { a: 1, b: 4, c: 5 } 6 console.log(returnedTarget); // Object { a: 1, b: 4, c: 5 }
Example usage:
copy an object
1 const obj = { a: 1 }; 2 const copy = Object.assign({}, obj); 3 console.log(copy); // { a: 1 }
Deep copy problem
for deep copy, we need to use a different approach, because Object.assign () is a copy of the property value. If the property value of the source object is a reference to an object, it only points to the reference.
1 let obj1 = { a: 0 , b: { c: 0}}; 2 let obj2 = Object.assign({}, obj1); 3 console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} 4 5 obj1.a = 1; 6 console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} 7 console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} 8 9 obj2.a = 2; 10 console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} 11 console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}} 12 13 obj2.b.c = 3; 14 console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} 15 console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} 16 17 // 深拷贝 18 obj1 = { a: 0 , b: { c: 0}}; 19 let obj3 = JSON.parse(JSON.stringify(obj1)); 20 obj1.a = 4; 21 obj1.b.c = 4; 22 console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
Merge objects
. 1 const O1 = {A:. 1 }; 2 const = {O2 B: 2 }; . 3 const = {C O3:. 3 }; . 4 . 5 const obj = Object.assign (O1, O2, O3); . 6 the console.log (obj); // {A:. 1, B: 2, C:. 3} . 7 the console.log (O1); // {A:. 1, B: 2, C:}. 3, attention will change their audiences .
The combined objects having the same attribute
. 1 const O1 = {A:. 1, B:. 1, C:. 1 }; 2 const = {O2 B: 2, C: 2 }; . 3 const = {C O3:. 3 }; . 4 . 5 const obj = Object.assign ({}, O1, O2, O3); . 6 the console.log (obj); // {a:. 1, B: 2, C:}. 3, note that the other property is covered subsequent objects having the same attribute parameters
Inherited property and can not be enumerated attribute is a copy of makeup
. 1 const the Object.create obj = ({foo:. 1}, { // foo is an inherited attribute. 2 bar: { . 3 value: 2 // bar is not enumerated attribute. . 4 }, . 5 baz: { . 6 value:. 3 , . 7 Enumerable: to true // baz is itself may be enumerated attribute. . 8 } . 9 }); 10 . 11 const = Copy Object.assign ({}, obj); 12 is the console.log (Copy); // {baz:. 3 }
Primitive types will be packaged as an object
. 1 const V1 = "ABC" ; 2 const = V2 to true ; . 3 const V3 = 10 ; . 4 const the Symbol V4 = ( "foo" ) . 5 . 6 const obj = Object.assign ({}, V1, null , V2, undefined, v3, V4); 7 // primitive types are packed, null and undefined are ignored. 8 // Note that only the string wrapped object it may have its own enumerable properties. . 9 the console.log (obj); // { "0": "A", ". 1": "B", "2": "C"}
Symbol copy attribute type
1 const o1 = { a: 1 }; 2 const o2 = { [Symbol('foo')]: 2 }; 3 4 const obj = Object.assign({}, o1, o2); 5 console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox) 6 Object.getOwnPropertySymbols(obj); // [Symbol(foo)]
Exception interrupt the subsequent copy
. 1 const = Object.defineProperty target ({}, "foo" , { 2 value:. 1 , . 3 Writable: to false . 4 }); // target property is the read-only attribute foo. . 5 . 6 Object.assign (target, {bar: 2}, {foo2:. 3, foo:. 3, foo3:. 3}, {baz:. 4 }); . 7 // TypeError: "foo" IS Read-only . 8 // Note that this exception occurs when a second copy of the second attribute of the source object. . 9 10 the console.log (target.bar); // 2, first described the successful copy of the source object. . 11 the console.log (target.foo2); // . 3, first described a second attribute of the source object are also copied successfully. 12 console.log (target.foo); //1, can not be covered with the read-only attribute, the second attribute of the second copy of the source object fails. 13 is the console.log (target.foo3); // undefined, then assign method abnormal exit, and the third attribute is not to be copied. 14 the console.log (target.baz); // undefined, the third source object is not copied to.
Copy accessor
. 1 const obj = { 2 foo:. 1 , . 3 GET bar () { . 4 return 2 ; . 5 } . 6 }; . 7 . 8 the let = Copy Object.assign ({}, obj); . 9 the console.log (Copy); // {foo: 1, bar: 2 } getter value copy.bar obj.bar return value from the function 10 . 11 // the following function will copy all properties owned property descriptor 12 is function completeAssign (target, ... Sources) { 13 is sources.forEach (Source => { 14 the let descriptors = Object.keys (Source) .reduce ((descriptors, Key) => { 15 descriptors[key] = Object.getOwnPropertyDescriptor(source, key); 16 return descriptors; 17 }, {}); 18 19 // Object.assign 默认也会拷贝可枚举的Symbols 20 Object.getOwnPropertySymbols(source).forEach(sym => { 21 let descriptor = Object.getOwnPropertyDescriptor(source, sym); 22 if (descriptor.enumerable) { 23 descriptors[sym] = descriptor; 24 } 25 }); 26 Object.defineProperties(target, descriptors); 27 }); 28 return target; 29 } 30 31 copy = completeAssign({}, obj); 32 console.log(copy); 33 // { foo:1, get bar() { return 2 } }
Original link: https: //blog.csdn.net/Calla_Lj/article/details/89478765