Detailed explanation of the usage of Object.assign() in ES6

Method : Object.assign()
Function : Assign the value of the source object to the target object. The value of both objects will be overwritten, the value of the target object will be retained, and the value of the source object will be added.
Directions :

The Object.assign method performs a shallow copy, not a deep copy. That is to say, if the value of a property of the source object is an object, then the target object copies a reference to this object.

var object1 = { a: { b: 1 } };

ar object2 = Object.assign({}, object1);

object1.ab = 2;

console.log(object2.ab);

2. Purpose

2.1 Adding properties to objects

2.2 Adding methods to objects

2.3 Cloning Objects

function copyFnc(origin) {

return Object.assign({}, origin)}

var sur = { a: 1, b: 2 };

console.log(copyFnc(sur));

The above code copies the original object to an empty object, and we get a clone of the original object.

However, using this method to clone can only clone the values ​​of the original object itself, not the values ​​it inherits. If you want to keep the inheritance chain, you can use the following code.

function clone(origin) {

let originProto = Object.getPrototypeOf(origin);

return Object.assign(Object.create(originProto), origin);

}

In JS, the subclass uses Object.getPrototypeOf to call the parent class method to obtain the prototype of the object.

2.4 Merging multiple objects

//Merge multiple objects into one object

const merge = (target, ...sources) => Object.assign(target, ...sources);

//Merge multiple objects into a new object

const merge = (...sources) => Object.assign({}, ...sources);

2.5 Specifying default values ​​for properties

const DEFAULTS = {
logLevel: 0,
outputFormat: 'html'};
function processContent(options) {let options = Object.assign({}, DEFAULTS, options);
}

This is the end of this article about the usage and purpose of ES6 Object.assign(). For more information about the usage of ES6 Object.assign(), please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!