Object.assign() method in ES6

This article mainly shares with you that the Object.assign method is used to merge objects and copy all the enumerable properties of the source object (source) to the target object (target). The following article mainly introduces to you about Friends who need it can refer to the relevant information about the Object.assign() method newly added in ES6. I hope it can help everyone.

Preface

Copying the properties of object A to object B is a very common operation in JavaScript programming. The following article will introduce the Object.assign() property of ES6, which can be used for object copying.

In the JavaScript ecosystem, object copying has another term: extend. The following are the extend interfaces provided by two JS libraries:

Prototype: Object.extend(destination, source)

Underscore.js: _.extend(destination, *sources)

Introduction to Object.assign()

ES6 provides Object.assign(), which is used to merge/copy the properties of objects.

Object.assign(target, source_1, ..., source_n)

It will modify the target object and then return it: first copy all the enumerable attributes of the source_1 object to the target, and then copy the attributes of source_1 and so on in sequence.

1. The attribute 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 is unique, this means that when Symbol is used as the attribute name of an object, it is guaranteed that attributes with the same name will not appear. When the object attribute name is string or Symbol, Object.assign() supports both.

2. Property copying is achieved through assignment

The properties of the target object are created through copying, which means that if the target has setters methods, they will be called.

Another solution is to implement it through definition, which will create new own properties and will not call the setters method. In fact, another version of Object.assign() proposal uses this method. However, this proposal was rejected in ES6, and may be considered again in later versions.

Object.assign() usage example

1. Initialize object properties

The constructor is just to initialize the properties of the object. Usually, we have to do it multiple times Duplicate attribute name. In the constructor of the sample code, both x and y are repeated twice:

class Point
{
 constructor(x, y)
 {
  this.x = x;
  this.y = y;
 }
}

If possible, my personal preference is to omit all redundancy. (In fact, both CoffeeScript and TypeScript have syntax to solve the problem of repeated property names in constructors.):

class Point
{
 constructor(this.x, this.y){}
}

At least, Object.assign() can help us reduce some duplication:

class Point
{
 constructor(x, y)
 {
  Object.assign(this, { x, y });
 }
}

In ES6, { x, y } is the abbreviation of { x: x, y: y }.

2. Add a method to an object

ECMAScript 5, you use a function expression to add a method to an object:

In ES5, you need to use the function keyword definition New methods of objects:

MyClass.prototype.foo = function(arg1, arg2)
{
 //...
};

In ES6, the definition of object methods is more concise and does not require the use of the function keyword. At this time, you can use Object.assign() to add a new method to the object:

Object.assign(MyClass.prototype,
{
 foo(arg1, arg2)
 {
  //...
 }
});

3. Copy the object

Use Object.assign() to deeply copy the object, including its prototype

var Point = function(x)
{
 this.x = x;
}

Point.prototype.y = 2;

var obj = new Point(1);

var copy = Object.assign({ __proto__: obj.__proto__ }, obj); // 输出{x:1,y:2}

console.log(copy) // 输出{x:1,y:2}

Copy only its own attributes:

var Point = function(x)
{
 this.x = x;
}

Point.prototype.y = 2;

var obj = new Point(1);

var copy = Object.assign({}, obj);

console.log(copy) // 输出{x:1}

Related recommendations:

7 ES6 practical tips to share

ES6 javascript class Usage examples of get and set of classes

What are the functions of static methods of classes in ES6

The above is the detailed content of Object.assign() method in ES6. For more information, please follow other related articles on the PHP Chinese website!