New Object.Assign () method in ES6


Copy the attribute of the object to the B object, which is a very common operation in JavaScript programming. The following article describes the Object.Assign () property of the ES6, which can be used for object replication.

In the JavaScript ecosystem, the object replication has another term: extend. Below is the extend interface provided by two JS libraries:

prototype: Object.extend (Destination, Source)

Underscore.js: _.extend (Destination, * Sources)

Object.assign () Introduction

ES6 provides Object.assign () for merging / copy objects Attributes.

Object.assign (Target, Source_1, …, Source_N)

It modifies the target object, Then return it: copy all the enumerable properties of the Source_1 object to the target, then copy the properties of Source_1, etc.
 1. The property name can be a string or symbol   
in ES6, the attribute name of the object can be a string or Symbol. Because the Symbol value has uniqueness, this means that Symbol acts as an object name of the object, ensuring that the properties that do not appear without the same name. When the object property is called a string or symbol, Object.Assign ()
is supported.

2. Property Copy By assigning

Target objectThe attribute is created by copying, which means that if the Target has a setters method, they will be called.

Another solution is to be implemented by definition, which will create a new own attribute without calling the setters method. In fact, the proposal of

Object.assign () Object.assign () is use this method. However, this proposal was rejected in ES6, and the version will be considered again.

Object.assign () use example

1. Initialization Object Attribute

The constructor is for Initializing the properties of the object, usually, we have to repeat the name of the attribute multiple times. In the constructor of the sample code, X and Y have been repeated twice:

Class Point {Constructor (x, y) {this.x = x; this.y = Y;}}

If possible, personal preference will save all redundancy. (In fact, CoffeeScript has a problem with TypeScript has a syntax to resolve the property name repetition in the constructor.):

Class Point {constructor (this.x, this.y) {}}
 At least,  Object.assign ()  can help us reduce some repetitions: 

Class Point {CONSTRUCTOR (X, Y) {Object.Assign (this, {x, y});}}
   In ES6, 
{x, y} Abbreviation
{x: x, Y: Y}

. 2. Adding a method for the object

ECMAScript 5, you use a function expression to add a method to an Object:
  In ES5, Need to use the new method for defining the object: = function (arg1, arg2) {//…}; In ES6, the definition of the object method is more concise, and it is not necessary to use the function keyword. At this time,

Object.assign () can be used:

Object.assign (MyClass.Prototype, {FOO (Arg1, Arg2) {// …}};

3. Copy object
 use  Object.Assign ()  Depth replication object, including prototype 

Var point = function (x) {this.x = x;} Point.Prototype.y = 2; Var obj = new point (1); var copy = Object.assign ({__proto__: obj); // Output {x: 1, Y: 2} console.logCOPY) // Output {x: 1, y: 2}

Only copy itself:
   VAR Point = function (x) {this.x = x;} Point.Prototype.y = 2; var obj = new point (1); var copy = Object.assign ({}, obj); console.log (copy) // Output {x: 1} 

The above is all of this article, I hope this article For everyone’s learning or work, you can bring a certain help. If you have any questions, you can leave a message, thank you for your support of Tumi Cloud.

Object Properties in JavaScript
 Properties in JavaScript: Definition Versus Assignment   CALLABLE Entities In ECMAScript 6 
Original: ECMAScript 6: Merging Objects via object.assign ()

Translator: Fundebug
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment